Tabbar - resizing according to layout size, resp. MSIE size

Suite and Optimus Suite 5
#1

Hi,

I use dhtmlxLayout, windows and tabbars;
I’d like to have “nice” application - when user will change size of web client (in this case MSIE) also layouts and tabs have to be changed according to this.

Now it looks like imposibble.

The problem with resizing of dhtmlxLayout I’ve tried with using:

jvscript function:
function resizeForm() {
var parentObj = document.getElementById(mainLayout);
parentObj.style.width = document.body.parentElement.clientWidth;
parentObj.style.height = document.body.parentElement.clientHeight;
dhxLayout.setSizes();
return true;
}

which has been started called from HTML:

It works - from dhtmlxLayout point of view - but problem is appeared tabbar - in window which has been open in this layout.
Now selection of tabs doesn’t work - event tabBarSelect is not run after clik on tab…

Generally - is there any “nice” solution how to handle this controlls - tabbars, windows, llyouts according to size of web client?
I didn’t find any help in this forum neither help.

thank you and have a nice dya

Pavel

#2

Hello,

first of all… What is the page layout ? How did you initialize layout and other components ?

Possibly you may use fullscreen layout - dhtmlx.com/docs/products/dht … creen.html

Tabbar should be attached by attachTabbar method in order to be resized when cell, where it is attached to, resized:

dhtmlx.com/docs/products/dht … abbar.html

#3

Hi Alexandra,

we use XML definitions and on load of HTML function is started:
function dhxInitialization(xmlMenuFile) {
dhxLayout = new dhtmlXLayoutObject(mainLayout, “1C”, dhxStyle);
dhxLayout.setAutoSize(“a”, “a”);
dhxLayout.cells(“a”).hideHeader();
var parentObj = document.getElementById(mainLayout);
parentObj.style.width = document.body.parentElement.clientWidth;
parentObj.style.height = document.body.parentElement.clientHeight;

        // adjust layout            
        dhxLayout.setSizes();

        //Windows initialization
        dhxWins = new dhtmlXWindows();
        dhxWins.attachEvent("onClose", function(win) {
            dhxMenu.removeItem(win.idd);
            return true;
        });

        //StatusBar initialization
        dhxStatusBar = dhxLayout.attachStatusBar();
        dhxLayout.showStatusBar();
        //Menu initialization
        dhxMenu = dhxLayout.attachMenu();
        dhxLayout.showMenu();
        dhxMenu.setIconsPath(parentCodebaseDir);
        dhxMenu.setSkin(dhxStyle);
        dhxMenu.loadXML(parentDir + xmlMenuFile);
        dhxMenu.attachEvent("onClick", menuEvents);
    }

I’ve tried to use this 100% width/height - but with same result.

I’ve tried same syntax as on your exapmle :

html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; }

but still no result.
Probaly cause of the problem is in my usage-)

Could you help me?
Pavel

#4

parentObj.style.width = document.body.parentElement.clientWidth;
parentObj.style.height = document.body.parentElement.clientHeight;

Why don’t you attach the layout directly to document.body like in full screen example I mentioned before ?

dhxLayout = new dhtmlXLayoutObject(document.body, “1C”, dhxStyle);
…