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

Question

我正在使用bootstrap 3和jquery-ui,我在调整对话框大小时遇到​​问题.

我正在使用bootstrap的网格系统,也没有几个样式,所以我无法删除库或使用Jquery.noConflict().

使用jquery-ui我创建了一个内部有iframe的对话框,无需bootstrap即可正常运行但是当包含该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;
}