jquery-ui tabs content overflows container
I have a problem with jquery-ui tab content extending past the browser window width. In my project I have a table that too wide, but in the example provided I just made a div with a width of 2000px to illustrate the issue. The tabbed area stays within 100% width(only browser window width) while the rest of my content is much larger and overflows the wrapped jquery ui tabbed area.
I can somewhat get around the issue by wrapping the content in a div with overflow-y:auto, but I was hoping the tabbed area would expand with my content so the native browser scrollbars could be utilized, instead of using a divs scrollbars.
Ive tested jquery-ui 1.8.1, 1.8.5, and 1.8.16.
Anyone have any ideas around this?
Apparently I cant post an image because I dont have enough rep.
<!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>
Answer
Try setting the css width property for #tabs.
$('#tabs').css('width','2000px');