Layout and Resizer

API Reference

Overview

Layout is a concept element that doesn't contain anything in itself yet determines the way "meaningful" components are arranged. It divides the page into rows and columns where all other components are placed.



Initialization

Layout consists of rows and columns separated from each other by borders (except for a borderless layout). Rows contain an array of view objects arranged horizontally while cols is an array of vertically arranged objects. Border setting and border types are described in the corresponding chapter of the manual.

webix.ui({
    container:"layout_div",
    id:"mylayout",
    type:"space",
    rows:[
        {...},
        {cols:[
            {...},
            {...}
        ]}
    ]
})

Related sample:  Layout


When setting layout, you can easily omit the view:"layout" line and start setting rows and cols at once:

webix.ui({
    type:"wide",
    rows:[  
        {...}, {...} 
    ]
});
  • The container property defines the ID of a DIV element where you place the layout. Though it is an optional parameter, it makes sizing and positioning simpler.
  • The ID of Layout should be specified if you are going to work with it later.

Horizontal and Vertical Layout

Horizontal layout:

Three-row layout

webix.ui({
    container:"layout_div", // corresponds to the ID of the div block 
    rows:[
        { template:"row 1" }, // here you place any component you like
        { template:"row 2" },
        { template:"row 3" }
    ]
});

Vertical layout:

Three-column layout

webix.ui({
    container:"layout_div", // corresponds to the ID of the div block 
    cols:[
        { template:"col 1" }, // here you place any component you like
        { template:"col 2" },
        { template:"col 3" }
    ]
});

Complex layout

Any row can be divided into columns and any column may contain rows. This is how simple layouts are nested into each other:

webix.ui({
    container:"layout_div", // corresponds to the id of the div block 
    rows:[
        {template:"row 1"}, // here you place any component you like
        {template:"row 2"},
        { cols:[
            { template:"col 1" },
            { template:"col 2" },
            { template:"col 3" }
        ]}
    ]
});

Related sample:  Limits on Resizing

Resizer Lines

With the Webix library, you can make a draggable border, or so-called, resizer lines between layout rows and columns. The resizer line can be moved in both directions and change the dimensions of the components on both sides of it.

Resizer lines don't actually change the component's size. They only help users adjust the component's visual scheme to their needs.

It's recommended to set minWidth and maxWidth parameters for columns subject to resizing (minHeight and maxHeight for the rows). It prevents them from collapsing, as when the minimal width or height value is achieved, the resizer line cannot be moved anymore.

webix.ui({
    container:"layout_div",
    id:"layout",
    rows:[
        {...}, //1st row, non-resizable
        {...}, //2nd row
        {view:"resizer"}, 
        {...}, //3rd row
        {view:"resizer"},
        {cols:[  //4th row
            { // 1st column
                width:150,
                minWidth:50,
                maxWidth:250
            },
            {view:"resizer"},
            {....}, //2nd column
            {....} //3rd column
        ]}
    ]
})

Related sample:  Layout and Resizer

Responsive layout behavior depending on window/screen size is discussed separately.

Headers

Check how to make headers for different components here.

webix.ui({
    rows:[
        {   view:"template", // optional
            template:"Header for Column 1",
            type:"header"
        }, 
        {...}
    ]
})

Related Articles

Back to top