I'm having problems getting jqueryUI and bootstrap to work together.
Example here https://jsfiddle.net/2hcwxudd/1/
My Code:
<div id="dialog" title="Welcome">
<h1>Hello World</h1>
</div>
$(function () {
$("#dialog").dialog({
show: {
effect: "fold",
duration: 500
},
});
});
You can see on the dialog show there is a small resize event at the end of the animation that looks horrible. I can't seem to figure out what's causing it or how to resolve it, but removing bootstrap resolves the problem.
I've tried noConflict (it's not the js its the css thats causing it), and i've tried using various themes which all seem to have the same problem.
Any help would be much appreciated
This is due to box-sizing in bootstraping, you have to unset box-sizing property like,
.ui-dialog,.ui-dialog *{
box-sizing:unset !important;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments