劍道窗口：防止將內容調整為窗口大小

Question

我將不勝感激任何建議。

我有一個劍道窗口：

@(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>

當我嘗試調整窗口大小時，我的內容會根據窗口調整其大小。 我想防止這種情況，它應該具有滾動條。

謝謝！

Answer 1

您應該為窗口的頂部元素（不是窗口本身）設置width ，為此元素設置所需的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>