jQuery UI對話框樣式 - 溢出？

Question

嘿Stack，需要一些關於jQuery UI對話框樣式的幫助。你可以看到這裏發生了什麼：http://img714.imageshack.us/i/jquerydialogstylingissu.png/。

驗證消息和左上角的圖標都被切斷。我認爲這是因爲.ui-dialog有「overflow：hidden」，但刪除它沒有任何效果（我可以看到）。任何人都可以提供任何建議，讓這些顯示正確嗎？

連接左上角的圖標後，標題欄的HTML是：

<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> 

編輯（感謝立方眼睛工作室）：

更改的.ui-對話框的.ui-對話內容到「overflow：visible」修復了這個問題，但是您將失去內容區域的自動滾動並且可能會在標題欄中獲得意想不到的結果（假設首先有一個溢出隱藏在標題中的原因。沒有注意到任何不同）。失去汽車卷軸是一件大事。任何建議來解決這個問題將不勝感激。謝謝。

附加代碼：

<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> 

工具提示解決方案（僅適用於這個特定的工具提示插件）

更改getCropping（）的工具提示動態插件功能，使其作品在內容容器而不是窗口。

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

對於圖標，只需使對話框中的溢出可見即可。

<div class="ui-dialog" style="overflow:visible"> 

驗證消息看起來像z-index的東西，你可以發佈一些更多的代碼嗎？

Answer 2

我不太熟悉那個工具提示插件，但我想象的是工具提示絕對放置。我做了這個演示，似乎工作正常，也許你可以把它翻譯成插件。

<div class="ui-dialog" style="overflow:visible;"> 
    <div class="ui-dialog-title" style="position:relative; z-index:5">Title Bar</div> 
    <div class="ui-dialog-content" style="position:relative; z-index:10"> 
     Content Here 
     <div class="tooltip" style="position:absolute; top:-4px;"> 
      Tooltip Content 
     </div> 
    </div> 
</div> 

我只是確保內容部分的z-index大於標題部分。不知道這是否有幫助，但試試看。也讓他們都是相對的，而不是絕對的。