How to fix jQuery UI dialog box size while dragging and dropping?

Question

It was a simple dialog, as shown below, its height decreases whenever the dialog is dragged. Its height value even changes when I set the dialog resizable = false. Finally, I fixed it using the re-update height in the dragStop event handler.

I found that a similar problem was reported here , but it was with IE that the author suggested not setting the height value, which IMHO is not suitable for all use cases.

I am using Chrome and jQuery UI 1.8.19

<p><a id="edit" href="#">Open Editor</a></p> <div id="editor"></div> $(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; }); }); 

Update 1: I just created a new project (ASP.NET MVC 4) and found that the problem occurred when I used the CSS rule, why?

 * { 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

jQuery 1.8 finally understands the size of the window, and we no longer need to configure it :)

Documentation

Answer 2

jQuery incorrectly calculates dialog box size when using window size: border-box (with default template). I fixed the height of the store dialog box in the open event and manually set the height of the dialog in dragStart / dragStop events:

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

Answer 3

I fixed this with simple css:

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