jQuery UI对话框标题栏太高 [英] jQuery UI Dialog Titlebar too tall

问题描述

我正在使用jQuery UI对话框在我的页面之一上弹出一些补充信息.由于某些原因，在Chrome 11和Firefox 4中，标题栏太高了.由于某些原因，它在IE 9中是可以的.这是它的屏幕截图:

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:

我尝试手动设置标题栏的高度，这只会调整标题栏的彩色区域的大小，而不会调整标题文本或段落文本的位置.在Chrome开发人员工具中进行检查后，发现没有可能导致此问题的奇数页边距或填充.任何人都知道可能是什么原因造成的吗?下面，我包括了此对话框的脚本和标记.据我所知，没有将特殊的CSS应用于此对话框(标准jQueryUI CSS除外).如果有关系，我将ASP.Net/C#与jQuery 1.5.2和jQueryUI 1.8.12结合使用.

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-->

脚本:

$(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.

推荐答案

您始终可以使用以下样式设置样式:

You can always style it with:

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

我要补充一点，我测试了FF4.01和Chrome 11，并且您的代码对我有用，请参见

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

这篇关于jQuery UI对话框标题栏太高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！