scrollbar issue with dhtmlxTabbar with embedded dhtmlxTrees

Suite and Optimus Suite 5
#1

Hi there,

I’m having a problem with scrollbars not rendering correctly when hosting dhtmlxTrees within a dhtmlxTabbar. I’ve included a minimal subset of source to demonstrate the problem with this post. It’s using dhtmlx V2.5 Pro build 91111 vanilla and (included) also a variant of both dhtmlxTree and dhtmlxTabbar provided by yourselves to both to myself and one of my colleagues for other unrelated issues.

The document hosts objects according to the following graph:
body->dhxLayout->dhtmlxtab->2x dhtmlxtrees
The trees loadXML() some static XML that, when expanded, is taller than the window.

The problem is that when the first tree is expanded to a greater height than the available space, no scrollbar is rendered however any tab selection, for instance selecting and expanding the second tree or selecting the second tree and returning to the first renders scrollbars correctly

Things that I’ve already tried to no avail:

  • all permutations of enableAutoReSize and enableAutoSize
  • presence and absence of showInnerScroll
  • creating the trees with tab.attachTree and with a DIV and a normal constructor then attaching the DIV to the tab
  • calling setScroll
  • permutations of overflow settings in the style for the tab’s DIV

I get the problem with both Firefox 3.6 and MSIE6

If possible I’m hoping there’s a solution to this that doesn’t involve me attaching a callback to tree expand operations that then forces a tabbar resize

Thanks for your time,
Paul

#2

Hello,

you may try to apply the following:

dhxRecordTree.attachEvent(“onOpenEnd”,correctSizes);

dhxCreatedTree.attachEvent(“onOpenEnd”,correctSizes);

function correctSizes(){
dhxClipTab._setSizes();
}

#3

Alexandra,

Thanks for your prompt reply. Yes, that does fix the problem as manifest but I feel a little uncomfortable about having to manage and maintain code going forward that specifically copes with underlying rendering quirks for specific uses of the controls. Is this likely to be something that will be fixed in forthcoming releases?

#4

You can use attachTabbar() method. In this case the tree scrolls will be shown:

dhxClipTab = dhxLayout.items[0].attachTabbar();
dhxClipTab.addTab(“recorded”,“Recorded”,“60px”)
dhxClipTab.addTab(“created”,“Created”,“60px”)

dhxRecordTree=dhxClipTab.cells(“recorded”).attachTree();

You don’t need “clipTabBox” container in this case

#5

Alexandra,

That’s perfect, and also I guess teaches me the lesson that I should be using attach instead of attachObject with a DIV for nested DHTMLX components if I want things to work properly.

For completeness, I’ve also had to pop in:
dhxClipTab.setImagePath("…/public/imgs/");
dhxClipTab.setTabActive(“recorded”);
dhxLayout.items[0].showHeader();

To exactly mirror the prior behaviour.