Geek Answers Handbook

JQuery UI Tab does not scroll with container

Setup:

I have a div that is designed to scroll. This is the container for my jquery ui tab div.

Problem:

When I look at a container in IE8, it scrolls through different content in it, but the jquery user interface tab is fixed as position = fixed. Works great in FF. Any help is appreciated. Many thanks

CSS

#content { overflow:auto; margin: 1px; height: 700px; } div.content-container { border: solid 1px #C8C8C8; padding:10px; background-color: #F5F3E5; margin: 1px 2px 10px 1px; }

JS:

 $('#tabs').tabs();

HTML:

 <div id="content"> <div class="content-container"> <div id="tabs"> </div> </div> </div>
+8
javascript jquery jquery-ui scroll jquery-ui-tabs
source share
4 answers

Add position:relative to the scroll container. This is a common problem in IE.

+1
source share

I have exactly the same problems with other components - switches and slider. When I use standard components for this, I have no problem, but this only happens with the jquery ui library, so I suppose this is a JQuery UI error.

Unable to play on Firefox / Chrome and IE9 - only IE7 / IE8.

0
source share

I had the same problem in IE7 and several others, and I spent a couple of hours trying to fix everything we could think of, but to no avail. I figured it was not worth it to continue debugging something, which was probably a bug in jQuery UI (for IE7) and rewriting all JS in three lines of jquery. For reference, if anyone else struggles with this, this is what I did.

HTML

 <div id='tabs'> <ul> <li><a href='#tab-1'></a><li> <li><a href='#tab-2'></a><li> <li><a href='#tab-3'></a><li> </ul> <div id='tab-1'> <p>Some content</p> </div> <div id='tab-2'> <p>Some content</p> </div> <div id='tab-3'> <p>Some content</p> </div> </div>

corresponding css (using scss here)

 #tabs { position: relative; height: 250px; /* whatever the height is of your container */ & > div { position: absolute; top: 0; margin-top: 10px; &.hidden { visibility: hidden; } }

javascript (jquery required)

 $('#tabs li a').click(function(){ $('#tabs > div').addClass('hidden'); $($(this).attr('href')).removeClass('hidden'); });

Hope this helps someone. This is probably a lot lighter than using the full tabs plugin anyway, to be honest, and does this job pretty well. If this is not complete enough or you cannot make this code work, write me a comment and I will help you or come up with a js script.

0
source share

Try the following:

Define the height of the container as:

 .content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; } /* Tabs --------------------------------------------------- */ #tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } #tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; } #tabs {height: 100%; overflow: 'auto';} 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Creating a windows-like interface with jQuery UI</title> <!-- Load the jQuery UI CSS --> <link rel="stylesheet" type="text/css" href="mtl.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" /> <!-- Load jQuery first before jQuery UI! --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> <script> $(document).ready(function() { //$('#draggable3').dialog({width:'auto',height:'auto'}); // $('#tab_container').dialog({width:'600px',height:'auto'}); $( "#tabs" ).tabs(); // $('#tab_container').dialog({width:'600px',height:'auto'}); }) </script> <style> /* Style sheets for tab.*/ /* Containers --------------------------------------------------- */ .content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; } /* Tabs --------------------------------------------------- */ #tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } #tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #tabs .tabs_img { float: left; background-color: #aaa; margin: 0px 0px 0px 0px; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; } #tabs {height: 100%; overflow: 'auto';} </style> </head> <body> <!-- Begin Tabs Container --> <div id="tab_container" class="dialog_window" title="Tab Window Title"> <div class="content_container_1"> <!-- Begin Tabs Area --> <div id="tabs"> <ul> <li><a href="#tabs-1">jQuery UI</a></li> <li><a href="#tabs-2">jQuery</a></li> <li><a href="#tabs-3">ThemeRoller</a></li> </ul> <!-- Begin Tabs Section #1 --> <div id="tabs-1" style='max-width:400px;height:450px;overflow:auto; '> <p> <img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more. </p> <p> Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy. </p> <p> Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers. </p> <p> <a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a> </p> </div> <!-- End Tabs Section #1 --> <!-- Begin Tabs Section #2 --> <div id="tabs-2" style='max-width:400px;height:450px;overflow:auto;'> <p> <img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development. </p> <p> On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more. </p> <p> jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript! </p> <p> <a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a> </p> </div> <!-- End Tabs Section #2 --> <!-- Begin Tabs Section #3 --> <div id="tabs-3" style='max-width:400px;height:450px;overflow:auto;'> <div id="draggable3" class="dialog_window" title="Traced Modules Minimize"> <div class="css-tvw"> <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2"><a>SubmitBWTable [ Submit ]</a></label> <ul> <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label> <ul> <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label> <ul> <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label> <ul> <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label> </li> </ul> <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2">SubmitBWTable [ Submit ]</label> <ul> <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label> <ul> <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label> <ul> <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label> <ul> <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label> </li> </ul> </div> </div> </div> <!-- End Tabs Section #3 --> </div> <!-- End Tabs Area --> </div> </div> <!-- End Tabs Container --> </body> </html>
0
source share

More articles:


All Articles