Контейнер переполнения содержимого вкладок jquery-ui - PullRequest
Новая
       24

Контейнер переполнения содержимого вкладок jquery-ui

7 голосов
/ 09 декабря 2011

У меня проблема с содержимым вкладки jquery-ui, выходящим за пределы ширины окна браузера. В моем проекте у меня слишком широкая таблица, но в приведенном примере я просто сделал div с шириной 2000 пикселей, чтобы проиллюстрировать проблему. Область с вкладками остается в пределах 100% ширины (только ширина окна браузера), в то время как остальная часть моего содержимого намного больше и переполняет область с вкладками jquery ui.

Я могу обойти эту проблему, обернув содержимое в div с помощью overflow-y: auto, но я надеялся, что область вкладок расширится с моим контентом, так что вместо использования div-ов можно будет использовать собственные полосы прокрутки браузера. скроллбары.

Я тестировал 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>

Ответы [ 3 ]

2 голосов
/ 09 декабря 2011

Попробуйте установить свойство css width для # tabs. 

$('#tabs').css('width','2000px');
0 голосов
/ 05 февраля 2014

У меня была похожая проблема.Извините за все плохое скрытие деталей, проект, над которым я работаю, подлежит соглашению о конфиденциальности.

Это была проблема, когда вкладки перекрывали содержащиеся элементы: tabs's overlaying div's

который был вылечен путем вызова: 

$('.tabs').css('height','auto');

Конечный результат: tabs not overflowing div's anymore

Надеюсь, это кому-нибудь пригодится.

0 голосов
/ 09 декабря 2011

Из таблицы стилей пользовательского интерфейса jQuery: 

.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") */
...