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.
