Kendo Ui窗口在相關容器中的尺寸調整問題

Question

我想創建僅屬於容器內的kendo ui窗口（KUI）小部件。 搜索后，似乎不支持這種方式的小部件。 因此，我嘗試通過分配position: relative; overflow: auto;來盡可能地模仿position: relative; overflow: auto; position: relative; overflow: auto; 到容器中，問題就來了。

當我嘗試調整KUI大小時，其邊框與鼠標位置不對齊。 它似乎是容器和窗口視口之間的邊距（在下面的代碼段中為20px）。

我的問題是我如何才能使利潤減少或有其他解決方法。

 $(function() { $("#myKendoUiWindow").kendoWindow({ title: "myTitle", appendTo: "#container" }); }); 

 #container { margin: 20px; border: 1px solid #CCC; width: 300px; height: 300px; overflow: auto; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script> <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" /> <div id="container"> <div id="myKendoUiWindow"></div> </div> 

Answer 1

由於此問題/限制是已知問題，但尚未計划解決（感謝Lyubomir提供此信息），我認為使用jquery ui可拖動，可調整大小是目前最好的解決方法。

 $(function() { var $w = $("#myKendoUiWindow").kendoWindow({ title: "myTitle", appendTo: "#container", resizable: false, // use jquery ui resizable draggable: false // use jquery ui draggable }).parent(); // kendoWindow wraps target element inside new one so we have to use parent $w.resizable().draggable({ cancel: ".k-window-actions .k-icon" // cancel dragging on window buttons }); // replace jquery ui 's resize icon with kendo ui's one $w.find(".ui-resizable-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se") .addClass("k-icon k-resize-se") }); 

 #container { margin: 20px; border: 1px solid #CCC; width: 300px; height: 300px; overflow: auto; position: relative; } 

 <link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script> <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" /> <div id="container"> <div id="myKendoUiWindow"></div> </div> 

Answer 2

窗口小部件始終位於body標記中，因此它們始終顯示在頁面上所有其他內容的頂部。 如果要定義一些邊界並強制窗口僅可在此處拖動，則可以使用小部件的事件 ，在拖動端檢查新坐標，如果用戶將窗口拖動到不希望的位置，則可以手動移動窗口。

要獲取Window新坐標，可以使用jQuery offset（） 。

Answer 3

劍道窗口也遇到同樣的問題。 我已經在Telerik的支持論壇中啟動了一個主題 ，您可以根據需要選擇該主題 ，但是他們似乎認為這不是Window組件的典型用例。