Kendo window: 防止将内容调整到 window 大小

Question

如有任何建议，我将不胜感激。

我有一个 kendo window:

@(Html.Kendo().Window()
.Name("detailsWindow")
.Title("..")
.Content("...")
.Draggable()
.Visible(false)
.Width(1350)
.Height(450)
.Resizable(r =>r.Enabled(true))    
)

然后我用处理程序打开它：

<script>
    function Documents_Change(e)
    {
        var selected = this.select()[0],
          item = this.dataItem(selected);

        var window = $("#detailsWindow");

        window.load("@Url.Action("Details", "CustomEntry")" + "?gtdNo=" + item.ID);

        window.data("kendoWindow").center().open();
    }
</script>

当我尝试调整 window 的大小时，我的内容将其大小调整为 window。我想防止这种情况，它应该有滚动条。

谢谢！

Answer 1

您应该为 window 的顶部元素设置宽度（这不是 window 本身），并为此元素设置所需的 width 和 overflow-x 设置为 hidden.

示例：给定以下 HTML

<div id="window">
    <div id="top-inner">
        <p> Content of the window</p>
        ...
    </div>
</div>

您应该定义以下 CSS 样式：

#top-inner : {
    width: 550px;
    overflow-x: hidden;
}

请参阅以下代码片段（尽管它在 JavaScript 中，但它为您提供了思路）。

$(document).ready(function() {
  $("#window").kendoWindow({
    width: "450px",
    title: "About Alvar Aalto"
  });
});

html {
  font-size: 12px; 
  font-family: Arial, Helvetica, sans-serif; 
}

#top-inner {
  width: 400px;
  overflow-x: hidden;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>

<div id="window">
  <div id="top-inner">
    <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

    <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

    <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>

    <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
  </div>
</div>

Kendo window: 防止将内容调整到 window 大小

Kendo window: prevent adjusting content to the window size

css

asp.net-mvc

jquery

kendo-ui

kendo-asp.net-mvc