Geek Answers Handbook

Jquery-ui container content container

I have a problem with jquery-ui tab contents extending beyond the width of the browser window. In my project, my table is too wide, but in the example I just made a div with a width of 2000 pixels to illustrate the problem. The tabs area remains within 100% of the width (only the width of the browser window), while the rest of my content is much larger and overflows the jquery ui tabbed area.

I can get around the problem a bit by wrapping the contents in a div using overflow-y: auto, but I was hoping the tabbed area would expand along with my content so that I could use my own browser scrollbars instead of using scrollbars divs.

Ive checked jquery-ui 1.8.1, 1.8.5 and 1.8.16.

Anyone have any ideas around this?

Apparently, I can’t post the image because I do not have enough reputation.

<!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>
+7
source share
3 answers

Try setting the css width property for #tabs.

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

I had a similar problem. Sorry that all the poor details, the project I'm working on, are subject to a confidentiality agreement.

This was a problem when the tabs overlapped the contained divs: tabs's overlaying div's

which was cured by calling:

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

Final result: tabs not overflowing div's anymore

Hope this can be helpful to someone.

0
source

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

More articles:


All Articles