Question

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

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

复制问题的步骤如下：

点击New / More按钮打开jQuery UI对话框。
然后尝试垂直调整对话框大小。
您将看到对话框内容宽度自动减少的异常情况，使对话框中出现滚动条。

编辑：我看到，如果我从页面中删除了Twitter引导程序，那么问题仍然会出现但不太明显。无论什么原因我无法从我的页面中删除twitter bootstrap，因为它正在我当前项目的所有其他地方使用。

在重新调整大小之前

重新调整大小后

这是我的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

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

Ticket #8506
Ticket #9832
Ticket #10069

我找到了一个解决方法，直到他们（jQuery UI Team）找到了该bug的解决方案。解决方法是在初始化对话框时使用Dialog的resizeStop事件。所以代码看起来像这样：

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

Answer 2

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

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

已通过此修复程序更新了jsFiddle。

Answer 3

基于Khurram的解决方案，这更加强大，因为它不使用幻数，而是考虑填充。

我还选择在resize事件而不是resizeStop上执行此操作，因为它不会来回跳转。 Updated JSFiddle

resize: function() {
  var heightPadding = parseInt($(this).css('padding-top'), 10) + parseInt($(this).css('padding-bottom'), 10),
    widthPadding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10),
    titlebarMargin = parseInt($(this).prev('.ui-dialog-titlebar').css('margin-bottom'), 10);
  $(this).height($(this).parent().height() - $(this).prev('.ui-dialog-titlebar').outerHeight(true) - heightPadding - titlebarMargin);

  $(this).width($(this).prev('.ui-dialog-titlebar').outerWidth(true) - widthPadding);
},

Answer 4

那css对我有用：

.ui-dialog .ui-dialog-content {
    width: 100% !important;
}

Answer 5

我不想使用硬编码的像素数（如另一个答案中的- 34），因为这不是一个好主意。在某些时候，它将是一个不同的大小（可能使用不同的主题），修复将不再起作用。 answer with the CSS fix在我的案例中没有成功，但给了我正确的提示。

所以，这是另一个＆＃34;修复＆＃34; /解决方法很简单：

//Resize handler for broken Dialog
function fixDialogWidth(event, ui)
{
    var $dialog = $(event.target);
    var $content = $dialog.closest(".ui-dialog-content");
    $content.css("width", "100%");
}

//Create Dialog
$caller.dialog({
    resize: fixDialogWidth,
});

或内联：

//Create Dialog
$caller.dialog({
    resize: function() {
        $(this).closest(".ui-dialog-content").
        css("width", "100%");
    },
});

使用jQuery UI v1.11进行测试。

这个非常基本的功能已经被打破了很长时间，这简直太尴尬了。不幸的是，大多数jQuery错误报告都没有提供可接受的解决方案。

Answer 6

我使用以下来自＃10069的临时解决方案的结果，它显示减少或删除默认的大填充可能会导致此问题。

.ui-dialog .ui-dialog-content  {
    /* Fix resizing issue where content doesn't fit in the dialog anymore */
    padding: 3.5px;
}

.ui-dialog .ui-dialog-titlebar  {
    /* Adjust the titlebar so it is equal to the content fix */
    margin: 3.5px;
}

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

6 个答案: