jquery-ui tabs content overflows container

Asked 9/12, 2011 at 1:11 Answered 5/2, 2014 at 12:43

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>

Ferrule answered 9/12, 2011 at 1:11 Comment(0)

Try setting the css width property for #tabs.

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

Timbuktu answered 9/12, 2011 at 2:8 Comment(3)

This works, but the content populating the container is dynamic, so I will never know what the size will be. Unless of course I do some JS hacking to find the max width of elements in the container, but I was hoping to avoid that if theres a clean CSS fix. – Ferrule 9/12, 2011 at 15:27

See if the max-width property works. For jQuery, it should be 'max_width' instead; it will convert it. – Timbuktu 9/12, 2011 at 18:10

I think this may be the closest Im going to get to a solution, or remove the container border itself. Thanks! – Ferrule 9/12, 2011 at 18:43

I had a similar issue. Excuse all the poor blanking out of details, the project I am working on is subject to a confidentiality agreement.

This was the issue, where the tabs overlayed the containing divs: tabs's overlaying div's

which was cured by calling:

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

End result: tabs not overflowing div's anymore

Hope this can be of use to someone.

Munch answered 5/2, 2014 at 12:43 Comment(0)

-1

From the jQuery UI stylesheet:

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

Antlia answered 9/12, 2011 at 3:30 Comment(1)

I'm not sure what you're getting at here. This line doesnt seem to fix the current issue. It also occurs in FF. – Ferrule 9/12, 2011 at 15:25

Recommended topics

Hot tags