Conflict between jquery-ui and bootstrap 3 when resizing

Question

I'm working with bootstrap 3 and jquery-ui together and I'm having issues when resizing dialogs.

I'm using the grid system of bootstrap and also few styles so I cannot remove the library or use Jquery.noConflict().

With jquery-ui I've created a dialog with an Iframe inside that works ok without bootstrap but when including that css, after resizing the dialog few times, the right margin increases.

I've created a jsfiddle that shows the problem.

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

Does anybody know how can I fix this without removing bootstrap?

I've also found a jquery-bootstrap library but the issue also occurs using that. https://github.com/addyosmani/jquery-ui-bootstrap

Using this css the margins look good but after resizing the dialog few times, it content grows more than the frame.

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

Using this one the problem with the right margin is fixed but not with the bottom one and for some strange reason using #ui-id-* doesn't fix the problem, I need to put the specific id which is not good because changes every time I open a new dialog.

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

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

Any other idea about how to fix this?

Finally, I've found a solution for this problem: in the css file put:

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

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

(.iframe is a class that I've added in the iframe component)

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

For me this CSS seems to fix the issue in your jsfiddle:

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

You basically set box sizing for all the elements in .ui-dialog.

EDIT:

OK, now I see... Add this one rule to your CSS and it should work:

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

There is a problem when counting the div width (and probably height). I don't know where the calculating comes from, but the px value is wrong. If you have issues with the height as well, add height to your CSS as well...