Layout - Is there a min height restriction?

I am trying to create a 2E layout with no resizing between the two and no headers in either cell. I want the top to be a fixed 25px height bar and the bottom 100% height.

No matter what I do, the top seems to force a 40px minimum height. Can I get this down to 20 or 25px, and if so, how?

I have not tested this, but you should be able to modify the dhtmlxlayout.js file.

1.) Create a copy of dhtmlxlayout.js (in case this creates an error)
2.) Open the dhtmlxlayout.js file in notepad.
3.) Search for “this._minHeight=this._minWidth=” (without quotes)
4.) Replace the numerical value after “this._minHeight=this._minWidth=” (without quotes) to the value you want (ie. 20).

Post here if this worked.

Try using header:


So, it could be 1C layout with header attached and hidden cell header:

Your header

The solution provided in previous post is also working. However, it would be better not to modify dhtmlxlayout.js. It is possible to redefine _minHeight for a certain layout:

yourLayout._minHeight = 20;

I will leave modifying the javascript to a last resort fix.

I tried setting _minHeight but it has no effect. Still 40px high.

I am declaring my layout like this:

    var dhxLayoutData = {
        parent: document.body,
        pattern: "2E",
        cells: [{
            id: "a",
            text: "Navigation",
            height: 25,
            fix_size: [null, true],
            header: false
        }, {
            id: "b",
            text: "Content",
            header: false

    dhxLayout = new dhtmlXLayoutObject(dhxLayoutData);
    dhxLayout._minHeight = 25;

You set cell height before limit got changed. So, 40px limit was applied.

The following will work:

dhxLayout = new dhtmlXLayoutObject(dhxLayoutData);
dhxLayout._minHeight = 25;

Thanks! that worked!

Now I want to minimize the whitespace height between the two panels were the resizer grab would have gone. Since I’m not allowing resizing, it’s just empty whitepspace.

How can I reduce that height to a smaller amount?

How can I reduce that height to a smaller amount?

There is not a public solution. If you want to avoid a space, try using header - I described this approach in the previous post.

I tried using your 1c header approach, but that leaves me with what looks like a similar gap still.

I tried playing around with various numbers for

dhxLayout.cont.obj._offsetTop = 0;
dhxLayout.cont.obj._offsetLeft = 0;
dhxLayout.cont.obj._offsetHeight = 0;
dhxLayout.cont.obj._offsetWidth = 0;

and it helps to remove that gap but then the page is messed up overall, the main content gets clipped at the bottom, etc.

Please provide the picture with the desired result.

What I want is two rows, the first row fixed at 25px high, the next row is 100% of whatever height is available. I want 0 space between the first and second row.


I have attached the html sample. You can run it from dhtmlxLayout/samples/02_conf/inc/ folder:

dhtmlxLayout/samples/02_conf/inc/demo.html (1.08 KB)

That worked awesome! Thanks!!!

There was a little overlapping but I fixed that by tweaking the numbers in your javascript.