dhtmlxLayout not resizing when browser window size is change

I’m currently evaluating dhtmlx for the use with my upcoming web project where I would need to use dhtmlx as part of Java portlets.

In order to be able to use dhtmlx, it must obey to the portlet container size. I eventually managed to get it working so that it displays correctly when opening the page but when the user resizes the browser window, the layout doesn’t follow.

Please see attached screen recording “dhtmlxLayoutResizeIssue.mp4” for issue clarification.

I tried to resolve the issue by applying the solution provided with viewtopic.php?f=5&t=14216 but it didn’t work. In my instance simply nothing happened. I changed the script so it should show an alert window instead and nothing happened either.
dhtmlxLayoutResizeIssue.mp4.zip (1.14 MB)

Could you attach completed demo of this project? (We can’t see the code clearly in your video).
docs.dhtmlx.com/doku.php?id=othe … leted_demo

On similar lines to this, I am using a “3E” layout, and wish to have the top and bottom cells always be 100px in height and the middle cell to fill in the remaining space. I am using fullscreen init mode, but when I resize the window (make it smaller), the top cell sizes to 100px fine, but the bottom cell gets pushed down off the page and the middle cell takes up too much space. And generally does not work as expected. Recreated it in a demo:


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

demo atttached
demo.zip (290 KB)

I have been able to reproduce this issue with the attached demo but I have to note I had to move the DIV tag into the HEAD in order to do so. However note that the issue is encountered as part of a Java portlet where the DIVs will automatically end up in the HTML body as it’s controlled by the Java portlet compliant portal. Please read the included information for more details. Thanks for looking into this.
dhtmlxDemoFiles.zip (1.07 MB)

You need to use method setAutoSize:
docs.dhtmlx.com/doku.php?id=dhtm … etautosize

I’m not sure to whom your last response refers to. Is it meant to address my issue (“topler”) or the issue reported by “ptinkler”? As to my insight, I don’t think that “ptinkler’s” issue is due to the same problem.

Nonetheless I have incorporated your suggestion into my demo and it didn’t change a thing. With this post I attached the “dhtmlxDemoFiles2.zip” which contains the folder “dhtmlxDemo_reproduced_despite_useof_autoresize” where you can double check the dhtmlx behaviour.

Shall I create a new discussion group entry for my issue? I have the feeling that handling two separate issues within one thread just confuses everyone.
dhtmlxDemoFiles2.zip (1.39 MB)

How to reproduce it via your demo? What files are need to be opend?

The attached “dhtmlxDemoFiles2.zip” contains a “readme” file, which I believe should clarify why certain additional files have been included. Each test case is contained in a separate folder. You would only need to open the *.html files and then resize the browser window to see that dhtmlxLayout is not resizing.

In about two days, I’ll be able to actually provide you with a remote access to one development machine with only this dhtmlx demo on it. With this you should be able to see the full context in which I would like to use it (i.e. Java portlet).

It seems that dhtmlx is a very mature product and I very much like it but my project requires me to use it within a Java portlet. If we don’t get the dhtmlxLayout to work appropriately, I cannot use any dhtmlx controls.


(if I corrrectly understood your problem and checked your demo…)

window.onload = init();

actualy this code do the following:

  1. run init()
  2. apply result of init to window.onload prop (in your case it will undefined)

that’s why while your

in body it works, i.e. when you call init() and have div in head section - it already inited and layout can document.getElementById() it, when your div in body - it not defined while init()

try to change window.onload = init(); to window.onload = function(){ init();} and keep div in body

Andrei, your last response resolved the issue which I encountered only when I tried to create a demo, however it doesn’t address the inital browser resizing issue as such.

In the meantime I have incorporated your suggestion and fiddled around a bit more to at least get it working outside of my portal server. Once I have figured it out, I hope I can then make it work within Java portlets.

Anyway, I made some progress and the issue shifted a little bit, from the whole dhtmlxLayout not resizing, to the contained columns not resizing while the browser window is resized.

Please see attached demo file “dhtmlxWithHolyGrailLayout.zip”, which also includes a “Readme.doc” for further clarification. Your help is much appreciated!
dhtmlxWithHolyGrailLayout.zip (1.1 MB)


I. myDhtmlxLayout.setAutoSize(“a;b;c”, “a;b;c”);

  1. actualy no need to call this each time before setSizes(), once right after init is enough
  2. (“a;b;c”, “a;b;c”) are not valid options for 3L pattern
    here is a demo dhtmlx.com/docs/products/dht … osize.html
    little explanation: for hor resize (i.e. if you will change browser width) you can use “a” or “b;c” - in this case cell a will changed or cells “b” and “c”, the same for height, but here cells “a” and “b” will changed or cells “a” and “c”
    so you need myDhtmlxLayout.setAutoSize(“a”, “a;b”); or myDhtmlxLayout.setAutoSize(“b;c”, “a;c”);…

II. setSizes()

when you init layout on doc.body or another cell - it have inner mechanism to determine if parent’s width/height was changed. but when you init layout on custom object (div in your case) - you need custom function (you have such one called “resize”) but also before setSizes() you need to change parent’s dimension, in your demo width changed automaticaly, height - not. that’s why layout height static all the time (at least on my side, in FF). and then setSizes() will “fill” layout into parent container (div)

I followed the suggestions provided with your last update and it then worked fine. Thanks for your help!