Layout - Is there a min height restriction?

Suite and Optimus Suite 5
#1

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?

#2

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.

#3

Try using header:

dhtmlxLayout/samples/02_conf/inc/header_footer.html

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;

#4

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;
    dhxLayout.setSizes();
#5

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

The following will work:

dhxLayout = new dhtmlXLayoutObject(dhxLayoutData);
dhxLayout._minHeight = 25;
dhxLayout.cells(“a”).setHeight(25);

#6

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?

#7

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.

#8

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;
dhxLayout.setSizes();

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

#9

Please provide the picture with the desired result.

#10

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.

#11

Hello,

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

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

#12

That worked awesome! Thanks!!!

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