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

#7

Hello @liudian,

Thank you for the clarification. This behavior comes from the layout logic, that takes initial height equal to it’s content, and as you are initializing grid with no defined height (so it should be 0), layout draws a cell with minimum possible height (which is 300 px).

It works slightly different in case of adding styles through CSS, because CSS gets loaded after most of internal calculations, and the difference in the behavior is expected.

If you add any height to the Grid component - it will work correctly, here is the updated demo:
https://snippet.dhtmlx.com/nm09dyxr

Or you can add the height property to the Layout cell, so the cell will occupy the empty space.

For the provided use case, the suggested way to stylize the layout cell is through CSS, like in the following example:
https://snippet.dhtmlx.com/8qzr582v

Kind regards,

#8

You got it wrong. You changed the height of the browser form to 200. In the example you gave, you can’t see the grid form

#9

When the upper div is very small, all components in it should be visible through the scroll bar.
When the upper layer div is extended to the full screen, the component should be automatically expanded to fill the form
If you think it’s OK, please look at this example in full screen

https://snippet.dhtmlx.com/9yhfj1n4

#10

Hello @liudian,

If you think it’s OK, please look at this example in full screen

As I described, the minHeight property works differently than min-height style, and that is expected behavior (as there is a possibility to add min-height style through CSS if it’s specific logic of work doesn’t fit user requirements):

This behavior comes from the layout logic, that takes initial height equal to it’s content, and as you are initializing grid with no defined height (so it should be 0), layout draws a cell with minimum possible height (which is 300 px).

As I understand, in your case it will be enough, to use the min-height CSS, instead of cell property, so the issue will be solved.

Here is a small screencast:

Kind regards,