Home/ Questions/Q 6551565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:21:12+00:00

I’m using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of

  • 0

I’m using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large — for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.

By default, the dialog panel displays its own scrollbar — which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I’d prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I’ve tried setting “overflow:hidden” for the dialog panel, and then “overflow:auto” for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.

Below is a (reduced) test case that shows the problem — including my attempt to use overflow styles to solve the problem. Replace “Big content…” with something that causes scrollbars to be required and you’ll see it.

Hope that’s clear enough. Any ideas on how to solve this problem? Many thanks…

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#dialog").dialog({height:300});
   $("#tabs").tabs();
});
</script>
</head>
<body>
   <div id="dialog" style="overflow:hidden;">
      <div id="tabs">
        <ul>
          <li><a href="#tab-1">tab-1</a></li>
          <li><a href="#tab-2">tab-2</a></li>
        </ul>
        <div id="tab-1" style="overflow:auto;">Big content...</div>
        <div id="tab-2" style="overflow:auto;">Big content...</div>
      </div>
   </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could limit the height of each div which contains your ‘content’ ie:

    height:100px;
overflow:auto;

    Demo: http://jsfiddle.net/AeXNP/

    Which makes everything very simple.

    Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css… To use overflow in your case, you require a height of the div. As the height is changing all the time, you don’t know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to ‘auto’. So the css for the self-expanding tab contents is:

    .fixedSizedTab {
    overflow:auto;     
    position:absolute; 
    height:auto; 
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; 
    margin-bottom:10px; 
    margin-right:0px; 
    margin-left:0px;
}

    Demo: http://jsfiddle.net/AeXNP/2/

    • 0