如何將滾動條放置在jquery ui模式對話框中的jquery ui選項卡上？

我創建了一個簡單的模態對話窗口。在窗口內，我創建了兩個選項卡。在選項卡中，我放置了一個動態樹。點擊時動態樹的大小會增加。發生這種情況時，我會在模態對話窗口的一側獲得一個滾動條。如何將滾動條放置在jquery ui模式對話框中的jquery ui選項卡上？

問題是當我向下滾動時，對話框中的標籤標題消失。有沒有辦法確保標籤標題是靜止的？換句話說，而不是讓對話欄滾動，選項卡可以有一個滾動條？

我在css和javascript上很綠。選項卡顯示在此模式對話框中。從這一點開始，當擴展樹而不是標籤時，對話框變爲可滾動。

<div id="dialog" title="File Browser"> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#finance">Finance FileShare</a></li> 
     <li><a href="#hr">HR Fileshare</a></li> 
     </ul> 
    <div id="finance"> 
      <div id="financetree"></div> 
    </div> 
    <div id="hr"> 
      <div id="hrtree"></div> 
    </div> 
    </div> 
    <div>Active node: <span id="echoActive">-</span></div> 
</div>

來源

2012-01-25 Ender Wiggin

任何鏈接或代碼示例，你在做什麼？ – Populus

肯定有，基本上你需要添加一個額外的包裝，並改變它的CSS溢出設置。如果可以的話，我建議創建一個jsfiddle併發布它，因爲它會極大地幫助您獲得更好的回覆。 – PriorityMark

插件將一類.ui-tabs-panel添加到您的面板，在您的案件的元素#finance和#hr。

下面的CSS將解決這些面板的高度，並添加一個垂直滾動條：

.ui-tabs-panel { 
    height: 300px; 
    overflow-y: auto; // show vertical scroll if necessary 
    overflow-x: hidden; // hide horizontal scroll 
}

DEMO

來源

2012-01-26 09:53:36

完美，謝謝。我試圖使用溢出：自動在選項卡divs，但由於某種原因，我無法得到它的工作。 –

爲什麼我看不到滾動條，如果我不把高度屬性？即使指定百分比似乎沒有幫助，我需要放入一組特定的像素。 –

如果不顯式設置高度，容器將展開以顯示所有內容，這是默認流程行爲。現在如果你把一個百分比，例如30％，記住這個：30％的是什麼？顯然，父母的身高的30％，所以你的父母應該有一個高度定義然後。 –

如何將滾動條放置在jquery ui模式對話框中的jquery ui選項卡上？

回答

相關問題