jquery-ui選項卡內容溢出容器

我有一個jquery-ui選項卡內容延伸超過瀏覽器窗口寬度的問題。在我的項目中，我有一張太寬的表格，但在示例中，我只是製作了一個寬度爲2000px的div來說明問題。選項卡式區域保持在100％寬度內（僅限瀏覽器窗口寬度），而其餘內容更大並溢出包裝的jquery ui選項卡式區域。jquery-ui選項卡內容溢出容器

我可以通過將內容封裝在帶有overflow-y：auto的div中來解決問題，但我希望標籤區域可以隨我的內容擴展，以便可以使用原生瀏覽器滾動條，而不是使用divs滾動條。

我測試過jquery-ui 1.8.1,1.8.5和1.8.16。

任何人有任何想法呢？

顯然我不能張貼圖像，因爲我沒有足夠的代表。

<!DOCTYPE html> 
<head> 
<link type="text/css" href="css/smoothness/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 

<script> 
$(function() { 
    alert("TEST"); 
    $("#tabs").tabs(); 
}); 
</script> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#tabs-1">Work Request Information</a> 
     </li> 
     <li> 
      <a href="#tabs-2">Assessments</a> 
     </li> 
     <li> 
      <a href="#tabs-3">Work Items</a> 
     </li> 
     <li> 
      <a href="#tabs-4">Documents</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
     <div style="background-color:red;height:200px;width:2000px;"></div> 
    </div> 
    <div id="tabs-3"> 
    </div> 
    <div id="tabs-4"> 
    </div> 
</div> 
</body> 
</html>

來源

2011-12-09 tfcmaster9

嘗試設置#tabs的CSS寬度屬性。

$('#tabs').css('width','2000px');

來源

2011-12-09 02:08:16 rkw

這是有效的，但填充容器的內容是動態的，所以我永遠不會知道尺寸是多少。除非我做了一些JS黑客找到容器中元素的最大寬度，但我希望避免這種情況，如果這是乾淨的CSS修復。 – tfcmaster9

查看max-width屬性是否有效。對於jQuery，它應該是'max_width'，而不是;它會轉換它。 – rkw

我認爲這可能是最接近我的解決方案，或刪除容器邊界本身。謝謝！ – tfcmaster9

-1

從jQuery UI的樣式表：

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

來源

2011-12-09 03:30:52 Terry

我不確定你在這裏得到什麼。這條線似乎並沒有解決當前的問題。它也發生在FF中。 – tfcmaster9

我有一個類似的問題。請原諒所有可憐的細節，我正在進行的項目受制於保密協議。

這是問題，那裏的標籤覆蓋在包含div： tabs's overlaying div's