jQuery UI Dialog Titlebar too tall

Question

I am using a jQuery UI Dialog to pop-up some supplementary information on one of my pages. For some reason, in Chrome 11 and Firefox 4, the titlebar is ridiculously tall. For

Answer 1

I don't know if it makes a difference, but you could try using a title attribute directly on your div instead of setting it in code:

<div id="dialog-form" title="Dialog Title" style="display:none;">
   ...
</div>

It could be that you have a cascading style issue. I use Chrome's developer tools to track these kinds of issues down. You can isolate the title element generated by jQuery-ui and examine the classes that it has inherited.

Answer 2

You can always style it with:

.ui-dialog .ui-dialog-titlebar 
{
    height: 40px; /* or whatever you want */
}

I would add that I tested FF4.01 and Chrome 11 and your code works for me, see working jsFiddle demo.

Answer 3

Add this :

position:absolute;
overflow:hidden

to class .ui-dialog :)

Answer 4

Just add the below attribute to the dialog's parent class, to solve this dialog header issue

.ui-dialog { clear: both; }