Start Building Professional
Web Apps Today

dhtmlxLayout - %age width or height

Really like the new Layout control and have played with them a little.
Is it possible to specify the width (or height) of a particular "cell" in percentage terms rather than a fixed pixel value.
I really want my two cells on the right to be 50% height but cannot see how to do this.

Unfortunately width and height can be only fixed values.

I have a problem then.
I have one cell on the right and two cells on the left (Layout Template "3L").

The lower cell on the right (cell "c") is set to say 50px.
If I resize the main window from somewhere near full screen (for example) to a screen layout that is much smaller, I simply lose cell "c".
All I have is cell "a" on the left and cell "b" on the right.
cell "c" has disappeared beneath "b" and cannot be recovered.
The only way to get it back is to make the screen full size again.

This is why I ask for a % setting on the cells - if I had set to say 75% height for cell "b" and 25% height for cell "c", it wouldn't matter if I re-sized the screen.
Because it would simply calculate 25% of whatever was there.
As it is, I'm assuming cell "b" is pushing cell "c" off the bottom because the height of cell "b" is greater than the height available on the screen.
In this instance, I would have thought the height of cell "c" would be fixed and the height of cell "b" would take up the remaining space.

Could you please provide demo?
Or just write some code regarding the layout and describe browser behavior (where to click/what to do to reproduce the issue)?

Sure. Very simple htm file attached.

In IE, if I resize the window to something smaller than I originally started with, I get an error: Line: 2002, Error: Invalid argument

Debugging that, I discover in this.setSizes that ver[a] equates to 154 and ay is -251

So the line this.polyObj[a].style.height = ver[a]+ay+"px"; errors because it is trying to set style.height to a negative value

Hope this helps - I'd really like to use this new control but cannot afford to right now as it doesn't quite work.

for (var a in ver) {

both[a] = a;

this.polyObj[a].style.height = ver[a]+ay+"px";

this.polyObj[a].childNodes[1].style.height = ver[a]-this.polyObj[a].childNodes[0]._h+ay+"px";

}

This is a default behavior of Layout. Probably autosize can help you?

Use for example dhxLayout.setAutoSize(null, "a;b"); for your layout type

More info here: http://dhtmlx.com/docs/products/dhtmlxLayout/samples/conf/autosize.html