Question

我正在使用bootstrap 3和jquery-ui，并且在调整对话框时遇到问题。

我使用了bootstrap的网格系统以及很少的样式，因此我无法删除库或使用Jquery.noConflict（）。

使用jquery-ui我已经创建了一个内部有iframe的对话框，没有引导程序就可以正常运行但是当包含那个css时，在重新调整对话框几次后，右边距会增加。

我创建了一个显示问题的jsfiddle。

$('a#pop').on('click', function (e)
{
    e.preventDefault();
    var page = $(this).attr("href");
    var pagetitle = $(this).attr("title");
    var myDialog = $('<div></div>')
    .html('<iframe style="border: 0; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 500,
        width: 600,
        title: pagetitle,
        open: function (event, ui)
        {
            myDialog.css('overflow', 'hidden');
        }
     });
     myDialog.dialog('open');
});

http://jsfiddle.net/dani2688/6m4VN/

有人知道如何在不删除引导程序的情况下解决这个问题吗？

我还发现了一个jquery-bootstrap库，但问题也出现了。 https://github.com/addyosmani/jquery-ui-bootstrap

使用这个css，边距看起来不错，但在对话框调整几次后，内容的增长超过了框架。

.ui-dialog .ui-dialog-content {
    -webkit-box-sizing: initial;
    -moz-box-sizing:initial;
     box-sizing: initial;`
 }

使用这个问题，右边距的问题是固定的，但不是底部的问题，并且出于某种奇怪的原因使用＃ui-id- *没有解决问题，我需要输入特定的id，即不好，因为每次打开一个新对话框都会改变。

.ui-dialog *{
    box-sizing: border-box;
 }

#ui-id-1{
    width: 100% !important;
}

关于如何解决这个问题的其他想法？

最后，我找到了解决此问题的方法：在css文件中输入：

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

iframe {
    height: 100% !important;
    padding-bottom:35px;
}

（。iframe是我在iframe组件中添加的一个类）

Answer 1

.ui-dialog,.ui-dialog-content {
    -webkit-box-sizing: content-box!important;
    -moz-box-sizing:content-box!important;
    box-sizing: content-box!important;
}

Answer 2

对我来说，这个CSS似乎解决了你的jsfiddle中的问题：

.ui-dialog *{
    box-sizing: border-box;
}

您基本上为.ui-dialog中的所有元素设置了框大小。

修改

好的，现在我看到......将这一条规则添加到CSS中它应该可以工作：

#ui-id-1{ width: 100% !important; }

计算div宽度（可能是高度）时出现问题。我不知道计算的来源，但px值是错误的。如果您也有高度问题，请将height添加到您的CSS中......

Answer 3

我有同样的问题，我刚用过

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

并且有效

调整大小时jquery-ui和bootstrap 3之间的冲突

3 个答案: