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:
Responsive behavior features 2 modes:
Initial Layout
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
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