如何将滚动条放置到jquery ui模态对话框内的jquery ui选项卡？

Question

I have created a simple modal dialog window. Inside the window, I have created two tabs. Within tabs, I have put a dynamic tree. The dynamic tree can grow in size when clicked on. When this happens, I get a scrollbar, on the side of the modal dialog window.

The problem is when I scroll down, the tab titles within my dialog disappear. Is there a way to make sure the tab titles are stationary ? In other words, rather than make the dialog bar scrollable, can the tabs have a scrollbar ?

I am quite green on css and javascript. The tabs are displayed within this modal dialog. From that point on, dialog becomes scrollable when the tree is expanded instead of the tabs.

<div id="dialog" title="File Browser">
    <div id="tabs">
       <ul>
         <li><a href="#finance">Finance FileShare</a></li>
         <li><a href="#hr">HR Fileshare</a></li>
       </ul>
     <div id="finance">
          <div id="financetree"></div>
     </div>
     <div id="hr">
            <div id="hrtree"></div>
     </div>
     </div>
     <div>Active node: <span id="echoActive">-</span></div>
</div>

Answer 1

The plugin will add a class .ui-tabs-panel to your panels, in your case the elements #finance and #hr .

The following CSS will fix the height of those panels and add a vertical scrollbar:

.ui-tabs-panel {
    height: 300px;
    overflow-y: auto; // show vertical scroll if necessary
    overflow-x: hidden; // hide horizontal scroll
}

DEMO