调整大小时的 jQuery UI 对话框会缩小对话框的内容

Question

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

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

重现问题的步骤:

1. 单击“新建”/“更多”按钮打开 jQuery UI 对话框。
2. 然后尝试垂直调整对话框大小。
3. 您将看到对话框内容的宽度自动减小的异常，从而使对话框内出现滚动条。

编辑:我发现，如果我从页面中删除 twitter bootstrap，那么问题仍然会出现，但不太明显。不管是什么原因，我无法从我的页面中删除 twitter bootstrap，因为它正在我当前项目的所有其他地方使用。

Before re-sizing

After re-sizing

这是我的 jQuery 代码。请查看JSFiddle here :

$(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

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

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

已更新jsFiddle通过此修复。