Style de la boîte de dialogue de l'interface utilisateur jQuery - débordement?

Question

Hey Stack, besoin d'aide avec le style des boîtes de dialogue jQuery UI. Vous pouvez voir ce qui se passe ici: http://img714.imageshack.us/i/jquerydialogstylingissu.png/.

Le message de validation et l'icône en haut à gauche sont tous deux tronqués. Je pensais que c'était parce que .ui-dialog avait "overflow: hidden", mais supprimer cela n'a aucun effet (que j'ai pu voir). Quelqu'un peut-il offrir des suggestions pour obtenir ces affichages correctement?

Le code HTML pour la barre de titre après la fixation de la partie supérieure gauche icône est:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
<img style="position: absolute; left: -28px; top: -25px; z-index: 2147483647;" src="/img/browser.png"> 
<span class="ui-dialog-title" id="ui-dialog-title-TaskEditWindow">Task Details</span> 
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"> 
<span class="ui-icon ui-icon-closethick">close</span></a> 
</div> 

Modifier (Merci à Cubed Studios Eye):

Changement .ui-dialogue et .ui-dialogue contenu "overflow: visible" résout ce problème, mais vous perdrez le défilement automatique sur la zone de contenu et vous obtiendrez des résultats inattendus pour la barre de titre (en supposant qu'il y avait une raison pour que le débordement soit masqué sur les titres en premier lieu. pas remarqué quelque chose de différent.). Perdre le défilement automatique est une grosse affaire. Toute suggestion pour contourner ce problème serait grandement appréciée. Merci.

Code additionnel:

<div style="display: block; z-index: 1004; outline: 0px none; height: auto; width: auto; top: 157px; left: 756px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-StageEditWindow"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <img style="position: absolute; left: -23px; top: -20px;" src="/img/browser.png"> 
     <span class="ui-dialog-title" id="ui-dialog-title-StageEditWindow">Stage Details</span> 
     <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="width: auto; min-height: 50.8px; height: auto;" id="StageEditWindow" class="ui-dialog-content ui-widget-content"> 
     <div class="screens-container"> 
      <div id="DetailsScreen"> 
       <form id="StageEditForm" action="#" onsubmit="return false;"> 
        <fieldset id="DetailsFieldSet"> 
         <div> 
          <label class="label" for="StageName">Name:</label> 
          <input type="text" class="input required validation-failed" name="Name" id="StageName"> 
          <label for="StageName" generated="true" class="validation-failed" style="position: absolute; top: -121.95px; left: 107.1px; opacity: 0; display: none;">This field is required.</label> 
         </div> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </div> 
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
     <div class="ui-dialog-buttonset"> 
      <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button> 
     </div> 
    </div> 
</div> 

infobulle Solution (uniquement pour ce particulier plugin infobulle)

Modifier la fonction getCropping() dans le plug-in dynamique pour l'info-bulle, de sorte que cela fonctionne sur le conteneur de contenu plutôt que la fenêtre.

function getCropping(el) { 
    var w = $(el).closest('.ui-dialog-content'); 
    var right = w.offset().left + w.width(); 
    var bottom = w.offset().top + w.height(); 
    var toolTipRight = el.offset().left + el.width(); 
    var toolTipBottom = el.offset().top + el.height(); 

    return [ 
     el.offset().top <= w.offset().top,      // top 
     right <= toolTipRight,   // right 
     bottom <= toolTipBottom,  // bottom 
     w.offset().left >= el.offset().left      // left 
    ]; 
} 

Answer 1

Pour l'icône, faites simplement apparaître le débordement dans la boîte de dialogue. Le message de validation ressemble à une chose z-index, pouvez-vous poster un peu plus de code?

Answer 2

Je ne suis pas trop familier avec ce plugin tooltip, mais j'imagine que les info-bulles sont placées absolument. J'ai fait cette démo qui semblait fonctionner correctement, peut-être que vous pouvez la traduire au plugin. Je viens de m'assurer que l'index z de la partie contenu est plus grand que la partie titre. Je ne sais pas si c'est de l'aide mais essayez-le. De plus, faites-les à la fois relatifs et non absolus.