如何在拖动过程中修复jQuery UI对话框大小？

这是一个简单的对话框，如下面的代码，只要拖动对话框，它的高度就会降低。 当我设置对话框的resizable = false时，它的高度值甚至会改变。 最后我通过在dragStop事件处理程序中重新更新对话框高度来修复它。

我在这里发现了一个类似的问题，但是它与IE和作者建议不设置高度值，即恕我直言并不适合所有用例。

我正在使用Chrome和jQuery UI 1.8.19

Open Editor
 
 $(document).ready(function () { $("#edit").on("click", function () { var $dialog = $("#editor") .dialog( { title: "HTML Editor", modal: true, autoOpen: false, width: 600, height: 350, minWidth: 300, minHeight: 200, closeOnEscape: true, resizable: false, open: function () { }, buttons: { "Save": function () { $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }, dragStop: function (e, ui) { $(this).dialog("option", "height", "377px"); } }); } $dialog.dialog("open"); return false; }); }); 

更新1：我刚刚创建了一个新项目（ASP.NET MVC 4），发现当我使用下面的CSS规则时发生了问题，为什么？

 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } 

Answer 1

使用box-sizing时，jQuery会错误地计算对话框大小：border-box（使用默认模板）。 我在open事件中通过商店对话框的高度修复，并在dragStart / dragStop事件中手动设置对话框高度：

  dragStart: function (e, ui) { $(this).parent().height(height); }, dragStop: function (e, ui) { $(this).parent().height(height); } 

Answer 2

我通过使用简单的CSS修复它：

  .ui-dialog { height:auto !important; } 

Answer 3

jQuery 1.8终于彻底理解了box-sizing，我们不再需要调整它了:)

文档