调整大小时的jQuery UI对话缩小了Dialog的内容

Question

我看到了jQuery UI Dialog的奇怪行为,我无法理解:

1. 问题是什么？要么
2. 我在这做错了什么？要么
3. 这是一个已知的错误？

复制问题的步骤如下:

1. 单击New/More按钮打开jQuery UI对话框.
2. 然后尝试垂直重新调整对话框的大小.
3. 您将看到对话框内容宽度自动减小的异常,使滚动条显示在对话框中.

编辑:我看到,如果我从页面中删除twitter bootstrap然后问题仍然出现,但不是很明显.无论是什么原因我无法从我的页面中删除twitter bootstrap,因为它正在我当前项目的所有其他地方使用.

在重新调整尺寸之前

重新调整大小后

这是我的jQuery代码.请在这里查看JSFiddle:

$(document).on("click", "#btnNew", function () {
    $("#popOutNewFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true
    });
});

$(document).on("click", "#btnMore", function () {
    $("#popOutMoreFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true
    });
});

Answer 1

我做了一些研究,发现这是一个已知的bug (jQuery UI团队知道这个bug).他们有几个门票分配给这个bug.如果您想跟踪他们的错误跟踪,请查看此处:

1. 门票#8506
2. 门票#9832
3. 门票#10069

我找到了一个解决方法,直到他们(jQuery UI团队)找到了bug的解决方案.解决方法是resizeStop在初始化对话框时使用Dialog 的事件.所以代码看起来像这样:

$(document).on("click", "#btnNew", function () {
    $("#popOutNewFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true,
        resizeStop: myResize
    });
});

$(document).on("click", "#btnMore", function () {
    $("#popOutMoreFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true,
        resizeStop: myResize
    });
});

function myResize(event, ui) {
    $(this).height($(this).parent().height() - $(this).prev('.ui-dialog-titlebar').height() - 34);
    $(this).width($(this).prev('.ui-dialog-titlebar').width() + 2);
}

编辑(2018年8月28日):我发现@ Dev-iGi的解决方案更好.所以把它标记为答案.我更新了我的解决方案以包括他的.点击这里:JSFiddle链接

Answer 2

在票证＃8506和＃9832中，提到了该错误与不同的box-sizing设置有关。显然，如果对话框容器或对话框内容不正确，则对话框/内容的计算将无法正常进行box-sizing: content-box。对我来说最好的解决方案是将其添加到CSS：

.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

使用此修复程序更新了jsFiddle。