Responsive functionality enhancement maybe?

Webix JS
#1

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 :slight_smile:

===========================================

  • 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?

#2

Hi,

All proposed changes will be included in Webix 4.0
Thanks for suggestions.

#3

Thanks maksim, much appreciated.