CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Mike Fielden
Mike Fielden

Reputation: 10153

JQueryUI Dialog display issue

I have the following code which builds a JQueryUI Dialog popup.

$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'});

When the popup is first displayed to the user it looks like the image below, with a giant header. I know that no additional css classes are being added to the popup.

After I resize the JQuery popup the popup appears correctly. The header is immediately resized and displays properly.

Has anyone else ran into this before?

alt text

Upvotes: 5

Views: 493

Answers (3)

Soundar
Soundar

Reputation: 2589

For this dialog header issue you can simply add the below attribute to the dialog's parent class

.ui-dialog { clear: both; }

Upvotes: 1

Mike Fielden
Mike Fielden

Reputation: 10153

Just updated to the latest UI CSS and worked like a champ... Thanks for your help Will

Upvotes: 1

Will
Will

Reputation: 1619

I've never run into that problem before, but I would suggest two things:

If you want to fix the symptoms and not the issue, you could just do a style override:

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

You could also try removing your options one at a time to see if one of them is causing the issue.

Upvotes: 3

Related Questions