Functionality
Overview
The Layout panels are automatically adjusted to the sizes of the widgets inserted into them. JavaScript Table, Tree, Menu and other UI widgets can be easily integrated into the Layout.
Complex Layout
Any row of this JavaScript widget can contain several columns, and each column can be divided into rows. Thus, you can nest one layout into another.
In-browser resizing
You can effortlessly change the size of Layout sections by moving resizing lines in different directions.
Responsive behaviour
By default, layout elements without fixed dimensions evenly distribute the available space among themselves and can shrink/grow when window size changes. Fixed-sized elements of Webix Layout widget can also respond to the changes of the window size in two modes. The first mode allows to hide some views when there's not enough space to show them. In the second mode views are moved to another part of the layout to fit in the available space.
Setting borders
You can set borders, margins and padding to columns, rows and blocks of the JavaScript layout.
Absolute Layout
By default, when you create a layout for a Webix-based app, you have to define the combination of rows and columns containing particular components. Absolute Layout is an alternative to this approach. It allows you to place Webix widgets into cells with fixed width, height, and position.
Data Layout
Data Layout is intended to simplify the creation of applications with complex data structures. One of its distinctive features is the repeater mode. It allows defining a template that describes the structure of each item of the DataLayout, so you won't have to configure each widget manually.
UI Spacer
You can create empty space in the layout cells vertically or horizontally, if you need to create an indent between the elements or align them in the Layout.
