stackoom
  简体   繁体   中英

jquery UI Tab not scrolling with container

 原文  2011-07-25 15:35:28  2   4    javascript/ jquery/ jquery-ui/ scroll/ jquery-ui-tabs

Question

Setup :

I have a containing div which is meant to be scrollable. This is a container for my jquery ui tab div.

Problem:

When I scroll the container in IE8 it scrolls other content in it but the jquery UI tab is fixed as though position=fixed. Works fine in FF. Any help welcome. 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>

4 answers

solution1
 1 ACCPTED  2012-04-26 18:42:22

Add position:relative to the scrolling container. This is a common issue in IE.

solution2
 0  2016-10-02 14:35:28

Try following:

Define the height of 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>

solution3
 0  2011-07-30 15:07:00

I have the exactly same problems with other components - toggles and slider. When I use standard components for this I have no troubles, but it occurs only with the jquery ui library so I suppose it is a jQuery UI bug.

Can't reproduce on Firefox/Chrome and IE9 - only IE7/IE8.

solution4
 0  2012-01-05 22:40:54

I had this same problem in IE7 and a few others and I spent a couple hours trying every fix we could possibly think of, but to no avail. I figured it wasn't anywhere close to worth it to continue debugging something that was probably a bug in jquery UI (for IE7) and rewrote all the JS in three lines of jquery. For reference, if anyone else is struggling with it, 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>

relevant 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 (requires jquery) 

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

Hope this helps someone. This is probably a lot lighter weight than using the full tabs plugin anyway, in all honesty, and gets the job done quite nicely. If this is not complete enough or you can't get this code to work, drop me a comment and I'll help you out or put up a js fiddle.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Droppable container not scrolling correctly in JQuery UI jquery ui draggable scrolling within container Tab as a button jquery ui Jquery ui tab issue JQuery UI dragging into sortable not scrolling jQuery Ui Draggable no scrolling with flexbox Create Dynamic tab in jquery-ui tab jQuery UI Tab, set tab passive and active 2 navigation tab bars jquery UI JQuery UI: Disable accordion tab?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM