jquery-ui标签内容溢出容器

时间:2011-12-09 01:11:13

标签: jquery jquery-ui jquery-ui-tabs

我遇到了jquery-ui标签内容超出浏览器窗口宽度的问题。在我的项目中,我有一个太宽的表,但在提供的示例中,我只是制作了一个宽度为2000px的div来说明问题。选项卡区域保持在100%宽度(仅浏览器窗口宽度)内,而其余内容更大,并且溢出包装的jquery ui选项卡区域。

我可以通过使用overflow-y:auto将内容包装在div中来解决这个问题,但我希望选项卡区域会随着我的内容扩展,因此可以使用本机浏览器滚动条,而不是使用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 个答案:

答案 0 :(得分:2)

尝试为#tabs设置css width属性。

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

答案 1 :(得分:0)

我有类似的问题。请原谅所有可怜的消息,我正在制定的项目受到保密协议的约束。

这是问题所在,标签覆盖了包含div: tabs's overlaying div's

通过致电:

治愈了
$('.tabs').css('height','auto');

最终结果: tabs not overflowing div's anymore

希望这对某人有用。

答案 2 :(得分:-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") */