jQuery UI Dialog Titlebar too tall

j'utilise un dialogue jQuery UI pour faire apparaître des informations supplémentaires sur une de mes pages. Pour une raison inconnue, dans Chrome 11 et Firefox 4, le titlebar est ridiculement grand. Pour une raison quelconque, il est ok dans IE 9. Voici une capture d'écran de ce à quoi il ressemble:

Screenshot of too-tall UI titlebar

j'ai essayé de régler manuellement la hauteur de la barre de titre, qui redimensionne seulement la zone colorée de la barre de titre, mais ne règle pas la position de le texte du titre ou du paragraphe. L'inspection dans les outils de développement Chrome ne révèle aucune marge ou rembourrage étrange qui pourrait être à l'origine de ce problème. Quelqu'un a une idée de ce qui pourrait causer ça? Ci-dessous, j'ai inclus le script et le markup pour cette boîte de dialogue. Pour autant que je puisse dire, il n'y a pas de CSS spécial appliqué à cette boîte de dialogue (autre que le standard jQueryUI CSS) dans le cas où cela importe, j'utilise 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');
    });
});

toute suggestion viable de correctifs serait grandement appréciée.

11
demandé sur Ender 2011-05-17 23:54:26

4 réponses

vous pouvez toujours le style avec:

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

je voudrais ajouter que j'ai testé FF4.01 et Chrome 11 et votre code fonctionne pour moi, voir travail jsFiddle démo .

7
répondu Code Maverick 2014-03-14 15:55:31

il suffit d'ajouter l'attribut ci-dessous à la classe parent de la boîte de dialogue, pour résoudre ce problème d'en-tête de la boîte de dialogue

.ui-dialog { clear: both; }
7
répondu Soundar 2013-05-27 12:01:01

ajouter ce qui suit:

position:absolute;
overflow:hidden

à la classe .ui-dialog :)

1
répondu user2283277 2013-04-15 16:16:51

Je ne sais pas si cela fait une différence, mais vous pouvez essayer d'utiliser un attribut de titre directement sur votre div au lieu de le définir dans le code:

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

il se peut que vous ayez un problème de style en cascade. J'utilise les outils de développement de Chrome pour suivre ce genre de problèmes. Vous pouvez isoler l'élément title généré par jQuery-ui et examiner les classes qu'il a héritées.

0
répondu camainc 2011-05-17 20:07:43