dhtmlxLayout cell content resize on collapse

I have a dhtmlxLayout with configuration, “2U”.
Both have custom components within. When cell “a” is collapsed, the custom component within cell “b” doesn’t get resized accordingly. It maintains its original size, with empty white space towards the extreme right of cell “b”.

Here is the html styling of the div within cell “b”.

<div id="staticData" style="display:none;overflow:auto;width:100%;height:99.9%;"></div>

Please advice.
Thanks.

If the container is attached by attachObject method, layout adjusts only sizes of this container and doesn’t change its content. So, you need to apply additional method to adjust the whole component.

Layout calls onExpand, onCollapse and onPanelResizeFinish events:
docs.dhtmlx.com/doku.php?id=dhtm … api_events
You may try to set event handlers for them to call functionality that resizes your component.

I am not aware of the DOM APIs to resize all contents based on parent element’s new size.
I would just like to refer the scriptlet that dhtmlx executes to resize DOM elements (cross-browser), to guide myself (for IE).
If you can give me a reference to the associated javascript code in the dhtmlx library, it will be very helpful.
Thanks.
(I own a Professional Edition of dhtmlx)

Also,
How do I programmatically resize a dhtmlxTabbar object, based on the dimensions of its outer container? I cannot seem to find any such method in the documentation. Also, I have set

tabbar.setAutoReSize(true);

Thanks again.

Hello,

setAutoReSize method be used if the sizes on tabbar container are set in percent. And the browser window is resized, the tabbar will adjust size of its parent container.

If you change container size manually, you may call adjustOuterSize method after that:

tabbar.adjustOuterSize();

Hi Alexandra,
Thank you for the reply !
adjustOuterSize() seems to work.
But, it seems to adjust the tabbar size only for the current tab. The moment I switch over to the another tab, the resize is undone. I could call adjustOuterSize() again to get the newly selected tab to fit the parent container’s size. But I cannot find any event that is triggered after the selected tab is loaded (onSelect is called before the selected tab is loaded, hence of no use :frowning: )
Please help. Its urgent !!

Thanks.

Hi,

if you use “ajax” or “ajax-html” loading mode, you may set onTabContentLoaded event handler:

tabbar.attachEvent(“onTabContentLoaded”,function(tabId){
/your code here/
})

In case of iframe-based loading, tabbar can not manage iframe content and events. So, you need to set onload event listener in the document that you load into tabbar and call parent functions from event handler.

A normal html “div”, that has been attached to the tabbar cell.
When I switch to this tab, the tabbar does not resize according to the outer container. I need to call adjustOuterSize(), just after a tab has been selected.

Could you please provide a sample that allows to reproduce the problem.