DHTMLX Docs & Samples Explorer

Index
dhtmlxlayout
Layout Appearance

# 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: