Start Building Professional
Web Apps Today

2 dhtmlxtress in a tabbar

I need to have a tabbed interface, with a different tree on each tab. I am trying to use dhtmlxtabbar and dhtmlxtree.

When I expand each of the trees so that the visible tree content is taller that the allocated area (and a vertical scroll bar is needed)
I get some odd scrolling behaviors, including double scroll bars, and the same scroll bar seeming to be shared across tabs even if the scrollable areas are of different size. I've included my HTML below. Please advise the best way to implement so that there will be a single vertical scroll bar when needed (unqiue for each tree within each tab).

thanks

...
<div id="a_tabbar" class="dhtmlxTabBar" oninit="onInit()" style="width:340px; height:350px;" skinColors="#FCFBFC,#F4F3EE" >
<div id="a1" name="By Skill" width="140px">
<!-- the 1st tree -->
    <div id="treeboxbox_tree" style="overflow:hidden;height:100%;width:300px;border:0px solid Silver">
        <script type="text/javascript" language="javascript" src="/treeLoad.js"></script>
    </div>
</div>
<div id="a2" name="By Role" width="140px">
<!-- the 2ndt tree -->
    <div id="treeboxbox_tree5" style="overflow:hidden;height:100%;width:300px;border:0px solid Silver">
        <script type="text/javascript" language="javascript" src="/treeLoad2.js"></script>
    </div>
</div>
</div>
...

Attached sample uses the same init code but works correctly. 
Which version of dhtmlxTabbar are you using?

Please try to use dhtmlxtabbar.js from attached sample, if it doesn't change anything - please provide any kind of sample where error can be reconstructed ( you can send it directly to support@dhtmlx.com )

The ZIP sample that you provided demonstrates the exact problems I've described.

1) Go to one tab and expand every possible parent node - you will see double vertical scroll bars eventually.

2) Go to the other tab & collapse all tree nodes. There is still a vertical scroll bar, even though none is needed (the expanded tree on the other tab seems to cause this).

The second issue is not as much of an issue as the first (double scroll bars). I'm using IE7, which the brower installed on all of our work machines. I also see issues on Chrome & Firefox, but not as bad (a horizontal scrollbar shows up when certain tree items are expanded, but the vertical scroll bar does not show up like on IE7)

To remove issue - change the way how tab's divs defined. 
<div id="a1" name="By Skill" width="140px" style="height:100%"> 

That fixed it - thanks