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 some reason it is ok in IE 9. Here's a screenshot of what it looks like:

I have tried manually setting the height of the title bar, which only resizes the colored area of the title bar, but does not adjust the position of the title text or paragraph text. Inspecting in Chrome developer tools reveals no odd margins or padding that could be causing this issue. Anyone have an idea as to what could be causing this? Below I have included the script and markup for this dialog. As far as I can tell, there is no special CSS being applied to this dialog box (other than the standard jQueryUI CSS) In case it matters, I am using ASP.Net/C# with jQuery 1.5.2 and jQueryUI 1.8.12.

ASP/HTML:

<!-- ssn -->
<div class="input-block">
    <asp:Label ID="lblSsn" runat="server" CssClass="input-label" AssociatedControlID="tbSsn">Social Security Number (<a id="show-ssn-disclosure" href="#">More Info</a>)</asp:Label>
    <asp:TextBox ID="tbSsn" runat="server" CssClass="input" />
    <div id="ssn-disclosure-text">
        <p>SSN disclosure is <strong>highly recommended</strong> if you have one. The University is required by federal law to report your SSN and other pertinent information
        to the Internal Revenue Service pursuant to the reporting requirements imposed by the Taxpayer Relief Act of 1997. The University will use the SSN you provide to
        verify the identity of each applicant, to link to the Payroll Office to verify amounts paid to students receiving teaching assistantships and research assistantships,
        and to link financial awards and admission data to registration histories and student records. This record-keeping system was established before January 1, 1975,
        pursuant to the authority of the Regents of the University of California under Article IX, Section 9 of the Constitution of the State of California. This notification
        is provided to you as required by the Federal Privacy Act of 1974.</p>
    </div>
</div><!--/input-block-->

Script:

$(function() {
    //hide ssn disclosure dialog box
    var $ssnDialog = $('#ssn-disclosure-text').hide().dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
    width: 500,
    title: 'SSN Disclosure'
    });

    //binding for ssn disclosure dialog
    $('#show-ssn-disclosure').click(function(e) {
        e.preventDefault();
        $ssnDialog.dialog('open');
    });
});

Any viable suggestions for fixes would be much appreciated.

Godship

Answer 1

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.

Bergsonism

Yes, I have tried this, and it results in a different problem, as noted in my question. This is what it looks like if I manually set the height: i.imgur.com/R6VI6.png. I suspect there is some weird CSS issue going on, but I have no clue what it is. – Godship

What if you comment out all other stylesheets except jQuery UI's css to see if it's jQuery UI or you. I don't know what to say other than the demo seems to work, with setting height manually and without. – Bergsonism

Believe it or not, your suggestion helped. I narrowed down the problem to a float:left; in the footer styles. I have no clue why that caused the problem, but removing it fixed the issue. I'm going to accept your answer, because you set me on the right path. – Godship

Apologies for the nitpick, but the double slash comment isn't valid CSS. Otherwise, a perfect solution. – Digression

I had the same problem and it was with a float left in a footer element too. I had "position:relative", and float:left on my css text. just removed the float left and all was smoothly. I also did edit my custom.css file, and deleted blocks of elements at a time to identify the problem. Cheers ! – Kindness

Answer 2

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

.ui-dialog { clear: both; }

Viens

Answer 3

Add this :

position:absolute;
overflow:hidden

to class .ui-dialog :)

Cajuput

Answer 4

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.

Intra

Nope, that's no good. I've inspected every element involved in the dialog, and I can't see anything that could be causing this. – Godship

Inspect that element with the dev tools then hit Computed styles. That'll show you a pretty picture detailing if its the height, padding, border, or margin that's out of whack. Then scroll down the styles and see where the problem style is coming into play. – Wilma