jquery UI Tab not scrolling with container

user_623137 0
Viewed 3171

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>
jquery-ui-tabs scroll jquery-ui jquery javascript
4 Answers

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>

user_69118240
Related