jquery-ui tab tràn nội dung chứa

Tôi gặp sự cố với nội dung tab jquery-ui mở rộng qua chiều rộng cửa sổ trình duyệt. Trong dự án của tôi, tôi có một bảng quá rộng, nhưng trong ví dụ được cung cấp, tôi vừa tạo một div có chiều rộng 2000px để minh họa vấn đề. Vùng thẻ nằm trong khoảng 100% chiều rộng (chỉ chiều rộng cửa sổ trình duyệt) trong khi phần còn lại của nội dung của tôi lớn hơn nhiều và tràn khu vực được bao quanh bởi thẻ jquery.jquery-ui tab tràn nội dung chứa

Tôi có thể giải quyết vấn đề bằng cách gói nội dung trong div với overflow-y: auto, nhưng tôi hy vọng vùng tab sẽ mở rộng với nội dung của tôi để thanh cuộn trình duyệt có thể được sử dụng, thay vì sử dụng divs thanh cuộn.

Ive đã kiểm tra jquery-ui 1.8.1, 1.8.5 và 1.8.16.

Bất kỳ ai có bất kỳ ý tưởng nào về điều này?

Dường như tôi không thể đăng hình ảnh vì tôi không có đủ đại diện.

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

Nguồn

2011-12-09 tfcmaster9

Thử đặt thuộc tính chiều rộng css cho #tabs.

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

Nguồn

2011-12-09 02:08:16 rkw

Tác phẩm này, nhưng nội dung chứa nội dung chứa là động, vì vậy tôi sẽ không bao giờ biết kích thước sẽ là bao nhiêu. Trừ khi tất nhiên tôi làm một số hack JS để tìm chiều rộng tối đa của các yếu tố trong container, nhưng tôi đã hy vọng để tránh rằng nếu theres một sửa chữa CSS sạch. – tfcmaster9

Xem liệu thuộc tính chiều rộng tối đa có hoạt động hay không. Đối với jQuery, nó phải là 'max_width' thay thế; nó sẽ chuyển đổi nó. – rkw

Tôi nghĩ rằng đây có thể là Im gần nhất sẽ nhận được một giải pháp, hoặc loại bỏ các biên giới container chính nó. Cảm ơn! – tfcmaster9

-1

Từ stylesheet 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") */

Nguồn

2011-12-09 03:30:52 Terry

Tôi không chắc chắn những gì bạn đang nhận được ở đây. Dòng này dường như không khắc phục được sự cố hiện tại. Nó cũng xảy ra trong FF. – tfcmaster9

Tôi đã có một vấn đề tương tự. Xin lỗi tất cả những người nghèo kiệt chi tiết, dự án tôi đang làm việc phải tuân thủ một thỏa thuận bảo mật.

Đây là vấn đề, nơi các tab phủ lên các div chứa: tabs's overlaying div's