DHTMLX Docs & Samples Explorer

Margins

DhtmlxLayout 2.5 supports margins that can be usefull in fullscreened init. For example, to add logo in the header or company info in the footer.

On default, fullscreened layout have the following margins (2px from each side):

dhxLayout.cont.obj._offsetTop = 2; // top margin
dhxLayout.cont.obj._offsetLeft = 2; // left margin
dhxLayout.cont.obj._offsetHeight = -4; // bottom margin
dhxLayout.cont.obj._offsetWidth = -4; // right margin

To create fullscreened layout with your custom margins - make the following steps:

1. Firstly, apply style for the correct layout positioning

html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	   }

2. Then, init an dhtmlxLayoutObject object.

var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");

3. Set margins (for example, top and bottom margins)

dhxLayout.cont.obj._offsetTop = 10; // top margin
dhxLayout.cont.obj._offsetHeight = -30; // bottom margin
// dhxLayout.cont.obj._offsetLeft = 10; // left margin
// dhxLayout.cont.obj._offsetWidth = -20; // right margin

4. And to apply new margins - adjust layout's position/dimension

dhxLayout.setSizes();

Complete HTML Page you can find here: