A layout cell can have any HTML content inside it. You can set it with the html attribute in the object of a cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", html: "Hello world"}
]
});
Related sample: Layout. Html Content
It is possible to add the hidden attribute into the the object of a cell(s) to render a layout with some cells hidden:
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", hidden:true}
]
});
Each layout cell can have a header with some text that describes the content of this cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Perfect cell header"}
]
});
You can also add an icon or an image into the header of a cell with the help of corresponding attributes - headerIcon and headerImage.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", headerIcon:"/icon.png"}
]
});
// or
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", headerImage:"/img.png"}
]
});
Related sample: Layout. Header
You can specify the necessary height of cell with a header using the headerHeight configuration option of a cell:
var layout = new dhx.Layout("layout", {
rows: [
{
id: "row1"
},
{
id: "row2",
header: "Row 2",
headerHeight: 80
}
]
});
Related sample: Layout. Header
If the header property is not set in the config of a cell, the headerHeight option will add a header without text for a cell.
You can easily control and change the size of a cell via the width and height attributes of the object of a cell.
var layout = new dhx.Layout("layout_container", {
rows: [
{
cols: [
{
header: "Block 1",
width: "40%"
},
{
header: "Block 2",
width: "60%"
}
]
},
{
rows: [
{
header: "Block 3",
height: "200px"
},
{
header: "Block 4",
height: "300px"
}
]
}
]
});
Starting from v7.0, you can define the maximal and minimal sizes for a cell by using its corresponding configuration properties: maxHeight, maxWidth, minHeight, minWidth.
var layout = new dhx.Layout("layout_container", {
cols: [
{
header: "Cell header",
minWidth: "400px",
maxWidth: "600px",
minHeight: "40px",
maxHeight: "100px"
}
]
});
Note, that minWidth/maxWidth properties prevent the width of a cell from being less/greater than minWidth/maxWidth values accordingly. The minHeight/maxHeight options work in the same way.
var layout = new dhx.Layout("layout_container", {
cols: [
{
header: "Cell header",
width: "50%",
maxWidth: "200px"
}
]
});
As you can see from the code example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px.
Starting with v7.0, you can configure a cell so that its width/ height would automatically adjust to the width/ height of the cell content. For this purpose, you need to set the width/ height options to "content":
var layout = new dhx.Layout("layout_container", {
cols: [
{
header: "Cell header",
width: "content" },
// more options
]
});
There are two attributes of the object of a cell: collapsable and collapsed. The first one defines whether a cell can be collapsed and expanded, and the second one checks whether a cell is collapsed during the initialization of a layout.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", collapsable:true, collapsed:false}
]
});
Related sample: Layout. Collapsable
Related sample: Layout. Accordion
To allow resizing of a cell, make use of the resizable option in the object of a cell.
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Cell header", resizable:true}
]
});
Related sample: Layout. Resizable
Starting from v7.0, you can define the resizing limits by setting necessary values to the minWidth/maxWidth, minHeight/maxHeight properties in the config of a cell.
By default, there is no space and borders between cells inside a layout and the cells look like they are merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the type configuration property of a Layout cell:
const layout = new dhx.Layout("layout", {
type: "space", cols: [
{
html: "1"
},
{
html: "2"
},
{
html: "3"
}
]
});
Related sample: Combination of types - DHTMLX Layout
The available values of the option are "line", "wide", "space", "none".
table.my_table td {
text-align: left;
vertical-align: middle;
width: 50%;
}
table.my_table td.version_info {
text-align: left;
background-color: white;
}
type:"line" | type:"wide" | type:"space" | without borders |
![]() |
![]() |
![]() |
![]() |