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组件的典型用例。