Layout’s cell height bug

Suite and Optimus Suite 8
#1

Step 1 ：online samples for DHTMLX Layout.
Step 2 ： Layout. 2E
Step 3：Replace JavaScript and html content with the following

In the horizontal screen with only 1080 height:
How can I ensure that table2 can appear on the screen after opening and folding table1?
Only table2 meets this style: flex: 1 1 auto; min-height:333px
However, this style, min height, is not effective in the style, and must be implemented with the minHeight parameter of the cell. But minHeight causes flex: 0 1 auto;
This is unreasonable.
In the vertical screen with a height of 2048:
After folding is turned off under the name table1, the table2 screen displays completely?
The height parameter must not be used

javascript

const layout = new dhx.Layout("layout", {
		type: "none",
		height:"100%",
		rows: [{
            css:'bbbb',
			rows:[{
				id: "form",
				height:"200",
                html:"Here is a form "
			},{
				type: "none",
				header: "table1",
				height:"1030",
				collapsable: true,
				collapsed: true,
			},{
				type: "none",
                header: "table2",
				id: "table2",
                css:"aaaa",
                
			}],
		}, {
			type: "none",
			html:"toolbar buttion",
			id: "toolbar",
			height: "56"
		}
		]
	});

const grid = new dhx.Grid(null, {
    columns: [
        { id: "title", gravity: 3, header: [{ text: "Title" }] },
        { id: "authors", gravity: 2, header: [{ text: "Authors" }] },
        { id: "average_rating", header: [{ text: "Rating" }] },
        { id: "publication_date", header: [{ text: "Publication date" }], type: "date", dateFormat: "%d/%m/%Y" },
        ],
    autoWidth:true,
    adjust:false
});
layout.getCell("table2").attach(grid)
grid.data.load("https://snippet.dhtmlx.com/codebase/data/grid/01/dataset.json");

html

<!-- component container -->
<div id="layout" style="height: 100%;"></div>
<!-- custom styles -->
<style>
	.aaaa {
        background-color: olive;
        min-height:300;
	}
	.bbbb {
        overflow-y: auto;
	}
</style>
#2

Hello @liudian,

As I understand, your requirement is to keep table 2 displayed, when the table 1 is expanded, am I right?

It can be done in 2 steps:

  1. Add the following rule:
	.bbbb {
        overflow-y: auto; 
	}

(as by default, layout cells hide overflow content)

  1. Add some height to the table2 row, for example:
            {
				type: "none",
                minHeight: 300,
                header: "table2",
				id: "table2",
                css:"aaaa",
                
			}

so this row will be displayed.

Here is an example:
https://snippet.dhtmlx.com/6gdklg4h

Btw, if you want to show some issue, you can use the snippet tool(open the snippet => reproduce the issue => click the save button => post the new link)

Kind regards,

#3

In a vertical screen of 2160 * 3840, Table2 needs to achieve full screen, not a fixed height, but can be expanded to full screen.
When Table 1 is folded, Table 2 automatically increases its height and occupies the entire screen;
When table1 is opened, table2 only displays a portion with the minimum height.

#4

https://snippet.dhtmlx.com/ffgrp516

In this example, you can change the height of table1, turn folding on or off, and then change the height of the browser form.

#5

Hello @liudian,

In this example, you can change the height of table1, turn folding on or off, and then change the height of the browser form.

Unfortunately, this point isn’t fully clear for me.

Could you please provide more details on what exactly you are trying to achieve, which steps you are already accomplished, which issue occurs and on which exact step?

Kind regards,

#6

https://snippet.dhtmlx.com/ydgjykt7

Click the button to see the difference between using CSS and using cell properties