jQueryUI Tabs inside jQueryUI Dialog -- how do I get a scrollbar for the tab-content only, rather than the entire dialog box?_问答_开发者

jQueryUI Tabs inside jQueryUI Dialog -- how do I get a scrollbar for the tab-content only, rather than the entire dialog box?

开发者 https://www.devze.com 2023-04-04 04:59 出处：网络

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 pane

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 u开发者_开发技巧p 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>

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/