如何在拖动过程中修复jQuery UI对话框的大小? [英] How to fix jQuery UI dialog size during dragging?

问题描述

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

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.

我发现在此处，但正是在IE中，作者建议不要设置高度值，因为IMHO不适用于所有用例.

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.

我正在使用Chrome和jQuery UI 1.8.19

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;
        });
    });

更新1:我刚刚创建了一个新项目(ASP.NET MVC 4)，发现当我使用以下CSS规则时会发生此问题，为什么?

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+ */
}

推荐答案

jQuery 1.8终于彻底了解了框大小，我们不再需要对其进行调整了:)

jQuery 1.8 finally understand box-sizing thoroughly and we no longer need tweaking it :)

文档

这篇关于如何在拖动过程中修复jQuery UI对话框的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！