Take the 2-minute tour ×

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

           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

share|improve this question
(Moved answer to this post instead); It could be that you forgot to include the CSS for dialogs, i.e. when building your theme through the theme roller, since it's using ui-widget classes, they have base styling, and those are then overridden individually by each module that you include in your custom-rolled jQuery UI. –  peol Jul 29 '10 at 9:47

3 Answers 3

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.

share|improve this answer
I did try systematically removing the options and none of those appear to be the issue. Good looking out though. If I cannot figure it out I guess I could override each style. Seems a bit of a work around though, huh? –  Mike Fielden Jul 28 '10 at 19:01
Yeah, it certainly is, but unfortunately for a last resort it's often your only one... The only other issue I could think of would be conflicting styles or scripts that you created. Do you have any styles applied to all spans or divs that would affect it? –  Will Jul 28 '10 at 19:04
Not that I can see. According to Firebug nothing is applied to it, well only JQuery styles. –  Mike Fielden Jul 28 '10 at 19:08
Two things: can you provide a link to the page and are you sure your jQuery and jQuery UI? That looks like regular redmond, so I don't see a problem there... perhaps closer inspection of the page would help. –  Will Jul 28 '10 at 19:13
Oops, unfinished thought there. *jQuery and jQuery UI are up to date –  Will Jul 28 '10 at 19:46
up vote 1 down vote accepted

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

share|improve this answer

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

.ui-dialog { clear: both; }
share|improve this answer

Your Answer


