Daniela Daniela - 3 months ago 35
jQuery Question

Conflict between jquery-ui and bootstrap 3 when resizing

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
.ui-dialog,.ui-dialog-content {
    -webkit-box-sizing: content-box!important;
    -moz-box-sizing:content-box!important;
    box-sizing: content-box!important;
}
Comments