DHTMLX Docs & Samples Explorer

Index
dhtmlxlayout

# Initialization

There are four ways to initialize a dhtmlxlayout object:

- Object-based
- Window-based
- Fullscreen
- Layout's cell-based

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

    <head>
            <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>

    </head>

'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

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            overflow: hidden;
        }
    </style>

The further steps depend on the initialization you will choose.