Daniela Daniela - 7 months ago 61
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)
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>')
autoOpen: false,
modal: false,
height: 500,
width: 600,
title: pagetitle,
open: function (event, ui)
myDialog.css('overflow', 'hidden');


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.

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;
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;

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;

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

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