Подтвердить что ты не робот

JQuery UI Dialog Titlebar слишком высок

Я использую диалоговое окно jQuery UI Dialog для отображения дополнительной информации на одной из моих страниц. По некоторым причинам в Chrome 11 и Firefox 4 строка заголовка смехотворно высока. По какой-то причине это нормально в IE 9. Вот скриншот того, как он выглядит:

Screenshot of too-tall UI titlebar

Я попытался вручную установить высоту строки заголовка, которая только изменяет размер цветной области строки заголовка, но не корректирует положение текста заголовка или текста абзаца. Проверка в инструментах разработчика Chrome показывает нечетные поля или дополнения, которые могут вызвать эту проблему. У кого-нибудь есть идея относительно того, что может быть причиной этого? Ниже я включил script и разметку для этого диалога. Насколько я могу судить, к этому диалоговому окну не применяется специальный 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-->

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');
    });
});

Любые жизнеспособные предложения для исправлений будут высоко оценены.

4b9b3361

Ответ 1

Вы можете всегда стилизовать его с помощью:

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

Я бы добавил, что я тестировал FF4.01 и Chrome 11, и ваш код работает для меня, см. рабочая демонстрация jsFiddle.

Ответ 2

Просто добавьте атрибут ниже в родительский класс диалогового окна, чтобы решить эту проблему с заголовком диалогового окна

.ui-dialog { clear: both; }

Ответ 3

Добавьте это:

position:absolute;
overflow:hidden

в класс .ui-dialog:)

Ответ 4

Я не знаю, имеет ли это значение, но вы можете попробовать использовать атрибут title непосредственно на своем div вместо того, чтобы устанавливать его в коде:

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

Возможно, у вас проблема с каскадным стилем. Я использую инструменты разработчика Chrome для отслеживания этих проблем. Вы можете выделить элемент заголовка, сгенерированный jQuery-ui, и изучить классы, которые он унаследовал.