Documentation

Responsive Layouts

Webix layout and accordion structures can respond to the changes of window size by hiding & showing or moving their rows (cols) depending on currently available space.

It occurs when:

  • Layout or accordion are inited without an HTML container, and hence, feature no fixed sizing;
  • The size of any component in such layout/accordion is bigger than the space available for its rendering. Fixed sizing is the right way to achieve it. Read more on initial component sizing.

Responsive behavior features 2 modes:

  • Views are hidden and can be shown back;
  • Views are moved to another place in layout.

Initial Layout

Responsive Hiding

To enable view hiding and showing on window resizing, set responsive property of a layout/accordion to true.

webix.ui({
   view:"layout", //optional line
   responsive:true, 
   cols:[
        {view:"list", ...},
        {view:"template", ...}
        {view:"datatable", ...}
    ]
});

Related sample:  Responsive Layout - Hidden cells

When space is not enough the last view from the left is hidden first.

After Window Resizing

Responsive Moving

To enable component moving during window resizing, provide an ID of the target layout as a value of responsive attribute of a parent layout of the needed component:

webix.ui({
    id:"a1", rows:[
        { responsive:"a1", cols:[ //parent layout for template 
             { view:"list", ...},
             { view:"template", ... }, //template will be moved to "a1" layout
             { view:"datatable", ... } 
        ]}
    ]
});

When space is not enough middle and right views are more likely to be moved.

Related sample:  Responsive Layout

After Window Resizing

If accordion items are placed into layout during resizing, they will behave like layout rows and cols.

For layouts and accordions that lie inside an HTML container the functionality can be switched on by calling resize() method after the container has been resized:

webix.event("divId", "resize", function(e){
    $$("layout").resize();
});
Back to top