It was a simple dialog as below code, its height is reduced whenever the

Question

0

Asked: June 9, 20262026-06-09T23:17:37+00:00 2026-06-09T23:17:37+00:00

It was a simple dialog as below code, its height is reduced whenever the

0

It was a simple dialog as below code, its height is reduced whenever the dialog is being dragged. Its height value is even changed when I set dialog’s resizable = false. Finally I fixed it by re-update dialog height in dragStop event handler.

I found a similar issue had been reported here, but it was with IE and the author suggested to not set height value, that IMHO is not suitable for all usecases.

I’m 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 problem happened when I used following 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+ */
}