Проблема с отображением диалога JQueryUI

Question

У меня есть следующий код, который создает всплывающее окно JQueryUI Dialog.

$j('<div></div>')
        .html(message)
        .dialog({
           autoOpen: true,
           bgiframe: true,
           buttons: { 'Dismiss': function() { $j(this).dialog('close') } },
           closeOnEscape: true,
           height: 'auto',
           modal: true,
           resizable: true,
           width: 400,
           title: 'An error has occurred'});

Когда всплывающее окно впервые отображается для пользователя, оно выглядит как на рисунке ниже, с гигантским заголовком. Я знаю, что во всплывающее окно не добавляются дополнительные классы CSS.

После изменения размера всплывающего окна JQuery всплывающее окно отображается правильно. Размер заголовка немедленно изменяется и отображается правильно.

Кто-нибудь еще сталкивался с этим раньше?

альтернативный текст http://i26.tinypic.com/156vl3n.png

Answer 1

Я никогда раньше не сталкивался с этой проблемой, но я бы предложил две вещи:

Если вы хотите устранить симптомы, а не проблему, вы можете просто переопределить стиль:

.ui-widget-header { height: 100px }

Вы также можете попытаться удалить свои варианты по одному, чтобы узнать, является ли один из них причиной проблемы.

Answer 2

Для этой проблемы заголовка диалога вы можете просто добавить атрибут ниже к родительскому классу диалога

.ui-dialog { clear: both; }

Answer 3

Только что обновил до последней версии CSS пользовательского интерфейса и работал как чемпион ... Спасибо за вашу помощь Уилл