How to make Layout panel fill remaining height

Suite and Optimus Suite 6
#1

I use a layout that has a header + toolbar buttons + content pane and the layout fills the whole screen:

                    var layoutConfig = {
                    height: "100%",
                    rows: [
                        {
                            id: "pToolbar",
                            header: "Test"
                        },        
                        {
                            id: "pMain",
                            html: "<div id='content_here' style='width:100%; height:100%; border'></div>",
                            height: "100%"
                        }
                    ]
                }

My objective is to make pMain fill the remainder of the screen, using height=100% obviously won’t work because 100% is 100% of the whole layout ie. pMain actually needs to be

total layout height - (header height + toolbar height)

A suggested approach is to set the div to 80% height but this is a bad choice because it will look different depending on the screen size. The only way I have found to do this is is to explicitly set the height for pMain:

height: (window.innerHeight - 90)+"px"
//I arrived at '90' by trail and error

Does anyone have a better idea about how to do this?

#2

I use the following to initialize my layout:

var layout = new dhx.Layout("divLayout", {
    height: window.innerHeight,
    width: "100%",
    rows: [
        {id:"toolbar-cell"},
        {id:"grid-cell"}
    ]
});

When I attach a toolbar to the toolbar-cell, the rest of the available space is dedicated to grid-cell. So from what you’ve posted, I don’t think you need to be doing the height calculation at all.

#3

Thanks for the reply, your approach does seem to work but only when there are two rows and also the height of the layout would need to be set again if the screen is resized.

My original post is simplified as I actually have 3 rows, when using your approach it seems to spread the height evenly across all 3:

https://snippet.dhtmlx.com/dzrjjbgz

I tried setting explicit heights on 2 of the rows thinking that the 3rd would then have the leftover space but strangely that seemed to have no effect:

https://snippet.dhtmlx.com/ldrk9lfc

I really cannot understand what is going on here

#4

I understand your frustration. What’s catching you here is the “gravity” setting, and it’s something I’m still working on wrapping my head around also. Assigning gravity: true (note: it’s true by default, so you have to explicitly turn it off by setting to false if you don’t want it) to rows causes them to distribute as evenly as possible in the available space. I’ve modified your second snippet to show you the difference it makes when you set the gravity to false for the rows you want to set explicit heights for.

https://snippet.dhtmlx.com/hz2cngff

#5

Thanks, I’ll look into Gravity

#6

Setting gravity to false is not a complete solution of this issue. Problem is in flexible nature (display:flex) of Layout and it’s Cells. When you resize window, height of Cells will be recalculated and still little bit changed. My solution is to set real fixed height for toolbar’s Cell:

<style>
.toolbar_cell {
	height: 56px !important;
	min-height: 56px;
	max-height: 56px;
	flex: 0 0 56px !important;
	overflow: hidden;
}
</style>

And Layout config:

let layout = new dhx.Layout('layoutCont', {
    rows:[
        {id:'toolbar', gravity:false, css:'toolbar_cell'},
        {id:'content', gravity:true}
    ],
});

See snippet:

https://snippet.dhtmlx.com/8lh7ma63

Height of Cell 56px = height of Toolbar 32px + top and bottom paddings of Tollbar 24px.