微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery UI对话框标题栏太高了

我正在使用一个jQuery UI对话框在我的一个页面上弹出一些补充信息.由于某些原因,在Chrome 11和Firefox 4中,标题栏是非常高的.由于某种原因,它在IE 9中是确定的.这里是一个截图:

我已经尝试手动设置标题栏的高度,标题栏只调整标题栏的彩色区域的大小,但不调整标题文本或段落文本的位置.在Chrome开发人员工具中进行检查显示没有可能导致此问题的奇怪的利润或填充.任何人都有一个想法可能是什么导致这个?下面我已经添加了这个对话框的脚本和标记.据我所知,没有特殊的CSS被应用到这个对话框(除了标准的jQueryUI CSS)如果重要,我使用ASP.Net/C#与jQuery 1.5.2和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');
    });
});

任何有关修复的可行建议将不胜感激.

解决方法

您可以随时使用:
.ui-dialog .ui-dialog-titlebar 
{
    height: 40px; /* or whatever you want */
}

我补充说,我测试了FF4.01和Chrome 11,你的代码适用于我,见working jsFiddle demo.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐