jquery UI Tab not scrolling with container

P

4

8

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>

Pendulous answered 25/7, 2011 at 15:35 Comment(4)

What a well formed question. +1 – Sielen 25/7, 2011 at 15:45

Still no answer is odd, I have the same issue and it's been a couple of months already. – Unreserve 17/11, 2011 at 21:8

I am also having this problem and have spent a very long time working on a fix to no avail so far. I'll post an answer if I figure it out – Reverberation 5/1, 2012 at 16:25

If you could take the time to create a jsFiddle, I would appreciate it. I could but having it ready would be advantageous. jsfiddle.net – Bathyscaphe 28/2, 2012 at 2:5

D

1

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

Dionedionis answered 26/4, 2012 at 18:42 Comment(0)

I

0

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.

Imalda answered 30/7, 2011 at 15:7 Comment(0)

R

0

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.

Reverberation answered 5/1, 2012 at 22:40 Comment(0)

P

0

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>

Provide answered 2/10, 2016 at 14:35 Comment(0)

Recommended topics

Hot tags