JQueryUI и шумоподавление с отображением диалогового окна

Question

У меня проблемы с jqueryUI и загрузкой для совместной работы.

Пример здесь https://jsfiddle.net/2hcwxudd/1/

Мой код:

<div id="dialog" title="Welcome"> 
    <h1>Hello World</h1> 
</div> 

$(function() { 
$("#dialog").dialog({ 
    show: { 
     effect: "fold", 
      duration: 500 
     }, 

    }); 
}); 

Вы можете увидеть в диалоговом шоу есть небольшое событие изменения размера в конце анимации, которая выглядит ужасно. Я не могу понять, что вызывает его или как его решить, но удаление bootstrap устраняет проблему.

Я пробовал noConflict (это не js его css, который вызывает его), и я пробовал использовать различные темы, которые, похоже, имеют ту же проблему.

Любая помощь будет высоко ценится

Answer 1

Это связано с box-sizing в бутстрапинге, вы должны unsetbox-sizing prope RTY как,

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

Demo

Answer 2

Это проблема с шириной диалогового окна,

хак это определить min-width,

.ui-dialog { 
    min-width: 300px; 
} 

Updated Fiddle