Responsive Filemanager

Webix JS
1

For mobile the filemanager is not responsive enough.
The view with fixed width without scrollbar. Icon view and Tree hide.
What can I or you do?

2

Hello,
The major widgets such as filemanager, spreadsheet, pivot and kanban are designed for desktops / tablets and will not fit on small screen devices such as phones.

3

Is there a posebility to make this responsive?

4

As to the adaptive behavior, you can hide barely any of File Manager inner views (including Tree) before initialization: https://snippet.webix.com/zybndxx9

5

I want to display the mode files for the view.
I found the mode and modes proterties. But I don’t want to set it as default.
I want to set it on a special innerWidth. Is there a other method to do this?

6

you can listen to window resize and change required elements
https://snippet.webix.com/tduoyvcq

7

Very nice. But I want to switch the view from ‘table’ to ‘files’ mode.
How can I do that?

My code:

webix.ready(function(){
  webix.ui({
    rows:[
      {
        view:"filemanager",
        id:"files",
        mode: "files",
        on:{
          "onViewInit": function(name, config){
            if (window.innerWidth<500) {
              if (name == "modes"){
			    //hide modes button
                config.hidden = true;
              }
              if (name === "bodyLayout"){ //&& window.innerWidth<500
                //hide tree ad resizer
                config.cols[1].hidden =1;
                config.cols[2].hidden =1;
              }
            }
          }
        } 
      }
    ]

  });
  var spacer = $$("files").$$("menuSpacer");
  var modes = $$("files").$$("modes");
  if (window.innerWidth<500) {
    spacer.hide();
    //modes.hide();
  } 
  $$("files").load("https://docs.webix.com/samples/64_file_manager/common/data.php");
});
8

https://snippet.webix.com/z3bceqrq

9

Nice. But ‘mode: “files”’ is default. I want it switch. How?

10

https://snippet.webix.com/kc9teilt

11

That’s great! THX