I am trying to build a responsive layout with a header menu, which is hidden at smaller resolutions and replaced with a menu button (and a sidemenu).
http://webix.com/snippet/ef5e793f
I want to always keep the “left” and “right” content in the header, and hide the menu when I run out of space.
Unfortunately the current responsive:“hide” functionality works by hiding cells left to right.
When space is not enough the last view from the left is hidden first.
I came up with a solution, which works in my limited testing so far 
===========================================
-
Add a view property responsiveCell:false to views/cells that should not be hidden (see the left and right label views in the snippet)
-
Add a condition to the hide IF statement in baselayout._responsive_cells
change
if (!cell._responsive_marker){
this._responsive_hide(cell, this._settings.responsive);
break;
}
to
if (!cell._responsive_marker && cell._settings.responsiveCell !== false){
this._responsive_hide(cell, this._settings.responsive);
break;
}
- Call webix Event at the end of baselayout._responsive_hide
webix.callEvent("onResponsiveHide",[cell._settings.id]);
- Call webix Event at the end of baselayout._responsive_show
webix.callEvent("onResponsiveShow",[cell._settings.id]);
==========================================
The extra IF condition simply skips cells I have marked as non-responsive.
Attaching to the “onResponsiveHide”, and “onResponsiveShow” events, allows to handle them and display a menu button, or do other custom modifications to the layout.
webix.attachEvent("onResponsiveHide", function(id){
if (id == "home:menu") {
//$$("hamburger").show();
}
});
webix.attachEvent("onResponsiveShow", function(id){
if (id == "home:menu") {
//$$("hamburger").hide();
}
});
I wonder if there is another way of doing the same? I have just started playing with webix and may have missed something.
[maksim] said there are some stability improvements expected in the next release here
http://forum.webix.com/discussion/7264/weird-behavior-of-elements-in-responsive-layout
Could functionality like this possibly make it in?