Sizing Cells

dhtmlxLayout provides several sizing options. These are:

Common assignment
Fixed size
Autosize

Common principles

There is a possibility to resize any item in the layout. However, there are some limitations in item sizing you need to know:

If there is only one item in a row, the width for this item can't be set.
If there is only one item in a column, the height for this item can't be set.
The system checks all width/height values. If any invalid value is detected it will be ignored.

There are separate methods to set item's width and height:

myLayout.cells("a").setWidth(200);
myLayout.cells("a").setHeight(200);

To get width and height of the current item use the following code:

var width = myLayout.cells("a").getWidth();
var height = myLayout.cells("a").getHeight();

Fixed size

If you need to fix size of a certain layout's cell, use the fixSize method:

myLayout.cells("a").fixSize(true, false);

The 1st parameter is responsible for resizing cell's width
The 2nd parameter is responsible for resizing cell's height.

If you set both parameters to 'true', the user won't be able to resize the item horizontally and vertically.

Autosizing

Autosize means the ability of layout's items to adjust automatically to the changes of layout's dimensions.

Different patterns have different autosize settings. First of all, to configure autosize you need to define the pattern you are going to use.

For example let's use the pattern "3L". We'll write the minimal init code and call the listAutoSizes function.

To test autosize we need to change layout's parent container. Windows will help us to do this:

var dhxWins = new dhtmlXWindows();
var w1 = dhxWins.createWindow("w1", 1, 1, 400, 350);

Now init layout:

var myLayout = w1.attachLayout("3L");
var autoSizes = myLayout.listAutoSizes();
 
// console.log(autoSizes) =>
    [
        "b;c",          // current horizontal autosize
        "a;c",          // current vertical autosize
        ["a", "b;c"],   // array with available horizontal autosizes
        ["a;b", "a;c"]  // array with available vertical autosizes
    ]

Current horizontal and vertical autosizes are "b;c" and "a;c". It means that when you will resize window horizontally (i.e. change layout's parent width) - cells "b" and "c" will be resized. It works the same for vertical direction - in this case cells "a" and "c" will be resized.

Available autosizes tell you what other properties can be set.

The following screenshots will demonstrate the changes:

1) Initial window

2) Now let's resize the window horizontally and check how it works

3) The default autosize settings were applied. As you can see, cells "b" and "c" were resized

4) Now we will change horizontal autosize and repeat all the above steps again to see how it works. Available horizontal autosizes include "a" and "b;c" properties. We've already tested the "b;c" property, let's test the cell "a". For vertical autosize we will use the default value - "a;c".

myLayout.setAutoSize("a", "a;c");

Hit F5 to restore the initial window's settings

5) Resize the window again in the same way

6) Cell "a" was changed

The vertical dimension can be configured in the same way.