Layout setting unspecified dimensions to 1px


#1

The Layout doesn’t seem to be rendering correctly for me if I don’t set height/width values for cells. I even tried duplicating the example Snippet for Layout HTML Content; it works correctly on the Snippet page, but does not when put into a basic HTML page. Here is my complete HTML code:

<!DOCTYPE HTML>
<html>
<head>
    <style>
	    /*these styles allow dhtmlxLayout to work in fullscreen mode in different browsers correctly*/
		html, body {
    	   width: 100%;
	       height: 100%;
		}
    </style>
</head>
<body>
<link rel="STYLESHEET" type="text/css" href="suite.css">
<script src="suite.js" type="text/javascript"></script>

<!-- component container -->
<div id="layout" style="height: 100%;"></div>

<style>
	.dhx_layout-cell-content {
    	padding: 12px;
	}
</style>

<script type="text/javascript">
const layout = new dhx.Layout("layout", {
    type: "line",
    rows: [
        {
            id: "toolbar",
            html: "<h2>Header</h2>",
            height: "content"
        },
        {
            cols: [
                {
                    id: "sidebar",
                    html: "<h2>Sidebar</h2>",
                width: "200px"
            },
            {
                id: "content",
                html: "<h2>Content</h2>"
            },
            {
                id: "rightbar",
                html: "<h2>Aside</h2>",
                width: "200px"
            },
        ]
    },
    {
        id: "footer",
        html: "<h2>Footer</h2>",
        height: "content"
    }
]
});
</script>
</body>
</html>

When I view this in Chrome, Edge, or Internet Explorer, the middle row (the one containing the columns) does not show. In the developer tools, it is showing that the div’s height is 1px.

In DHX6, the “gravity” setting of the cell is what I used to tell them to fill the parent cell’s remaining space, but I see that property’s usage has changed with DHX7. The behavior in the linked Snippet is the behavior I expect to see according to the documentation.

EDIT to add: I am using free version 7.0.2.


#2

Unfortunately your reported problem could not be reconstructed locally.
Your provided source code works well for me locally:


If the porblem still occurs for you please, provide a complete demo or a snmippet, where the problem can be reconstructed.


#3

The lines about include suite.js and suite.css are in wrong place. Move them to HEAD section. This work for me. Good luck


#4

This worked for me also, which is somewhat unfortunate. My pages containing DHTMLX are often loaded within a CMS framework, so they’re loading after the HEAD has already been processed. And because I have a lot of pages using DHTMLX, they’re not all on the same version at the same time, so I can’t just load the suite files along with the HEAD of the CMS. This hasn’t been an issue before DHX7, but I can work around this limitation by having the pages load without the CMS framework around it.