Conflict between jquery-ui and bootstrap 3 when resizing

Question

I work with bootstrap 3 and jquery-ui together and am having problems resizing dialogs.

I use bootstrap's grid system, as well as several styles, so I cannot remove the library or use Jquery.noConflict ().

With jquery-ui, I created a dialog with an iframe inside that works fine without bootstrapping, but when I turn on this css, after resizing the dialog several times, the right margin increases.

I 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 anyone know how I can fix this without deleting the boot file?

I also found the jquery-bootstrap library, but a problem also occurs with this. https://github.com/addyosmani/jquery-ui-bootstrap

With this css, the fields look good, but after resizing the dialog box several times, its content becomes larger than the frame.

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

Using this problem, the problem with the right margin is fixed, but not from the bottom, and for some strange reason, using # ui-id- * does not fix the problem, I need to specify a specific identifier, which is not good because it changes every time I open a new dialogue.

 .ui-dialog *{ box-sizing: border-box; } #ui-id-1{ width: 100% !important; } 

Any other idea on how to fix this?

Finally, I found a solution to 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 the class that I added to 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 problem in your jsfiddle:

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

Basically you set the box size for all 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; } 

When calculating the width of the div (and probably the height) a problem arises. I don’t know where the calculus comes from, but the px value is wrong. If you have problems with height, add height to your CSS as well ...

Answer 3

I had the same problem, I just used

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

and he works