Блог

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

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

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

 .ui-dialog { clear: both; }
  

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

 position:absolute;
overflow:hidden
  

для класса .ui-dialog 🙂

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

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

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