DHTMLX Docs & Samples Explorer

Cells Sizing Options

DhtmlxLayout provides several sizing options. These are:

  • Common assignment
  • Fixed size
  • Autosize

Common assignment

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

  • If there is the only item in a row, the width for this item can't be set
  • If there is the only item in a column, the height for this item can't be set
  • The system checks all width/height values. If it detects any invalid value usage it will just ignore them.

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

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

The width and the height of the current item can be easily gotten in the following way:

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

Fixed Size

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

dhxLayout.cells("a").fixSize(true, false);
  • The first parameter is responsible for resizing cell's width
  • The second parameter is responsible for resizing cell's height.

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

Autosize

'Autosize' means the ability of layout's items to adjust automatically to the dimension changes of the layout.
You can specify items for autosizing in the following way:

dhxLayout.setAutoSize("b;c", "a;c");

In the code snippet, if you change layout horizontally, the cells b,c will change their sizes according to layout size changes. And if you change layout vertically, the cells a,c will change their sizes according to layout size changes.
The items' ids are taken as input parameters and separated from each other by the semicolon ”;”.

  • The first parameter - the ids of items to which you want to apply horizontal autosizing.
  • The second parameter - the ids of items to which you want to apply vertical autosizing.