DHTMLX Docs & Samples Explorer


There are four ways to initialize a dhtmlxlayout object:

But firstly, befove moving to the main initialization - make some preparatory steps:
1. Download the dhtmlxLayout package from the server and place it in a folder
2. Create an index.html file
3. Place the full paths to dhtmlxLayout's CSS and JS files into the header of html file

        <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout.css">
        <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxlayout_dhx_blue.css">
        <script src="[full path to this file]/dhtmlxcommon.js"></script>
        <script src="[full path to this file]/dhtmlxcontainer.js"></script>
        <script src="[full path to this file]/dhtmlxlayout.js"></script>

'dhx_skyblue' is the default skin. If you want to apply another skin - specify path to the appropriate dhtmlxLayout_[name_of_the_skin].css file from the dhtmlxLayout package.

If you need to work with all available visible space, we recommend to specify the following style for the <body> tag in order that dhtmlxLayout and dhtmlxWindows work correctly:

  • width:100%; height:100% - provides correct work of a fullscreen layout
  • margin:0px - hides the default body space
  • overflow:hidden - hides body scrolls
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;

The further steps depend on the initialization you will choose.