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

前端之家收集整理的这篇文章主要介绍了调整大小时的jQuery UI对话缩小了Dialog的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到jQuery UI Dialog的一个奇怪的行为,我无法理解:

>问题是什么?要么
>我在这里做错了什么?要么
>这是一个已知的错误吗?

复制问题的步骤如下:

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

编辑:我看到如果我从页面删除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",modal: true
    });
});

解决方法

在门票#8506和#9832中,提到该bug与不同的盒子大小集有关.显然,如果对话框容器或对话框内容不是Box-sizing:content-Box,则对话框/内容的计算不能正常工作.
对我来说最好的解决方案是将其添加到css中:
.ui-dialog,.ui-dialog-content {
    Box-sizing: content-Box;
}

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

原文链接:https://www.f2er.com/jquery/178761.html

猜你在找的jQuery相关文章