javascript - JqueryUI and bootstrap interference with dialog display -


i'm having problems getting jqueryui , bootstrap 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 dialog show there small resize event @ end of animation looks horrible. can't seem figure out what's causing or how resolve it, removing bootstrap resolves problem.

i've tried noconflict (it's not js css thats causing it), , i've tried using various themes seem have same problem.

any appreciated

this due box-sizing in bootstraping, have unset box-sizing property like,

.ui-dialog,.ui-dialog *{     box-sizing:unset !important; } 

demo


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -