jQuery UI Dialog Titlebar too tall

问题

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.

回答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.

回答2:

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

.ui-dialog { clear: both; }

回答3:

Add this :

position:absolute;
overflow:hidden

to class .ui-dialog :)

回答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.

来源：https://stackoverflow.com/questions/6036331/jquery-ui-dialog-titlebar-too-tall

标签

jquery

jquery-ui

jquery-ui-dialog