NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Flex Layout as Part of Webix UI, programming examples of Flex Layout as Part of Webix UI

Flex Layout as Part of Webix UI

Do you want to create a flexible layout for your future web app? Don't hesitate to use this programming example by Webix. It will help you adjust your app to any screen size. You are welcome to make use of our free code samples for your web development projects.

JS Code

webix.ready(function(){
  if (webix.CustomScroll && !webix.env.touch) webix.CustomScroll.init();
  var flex = {
    margin:10, padding:0, type:"wide",
    view:"flexlayout",
    cols:[
      { view:"list", data:[
        { value:"Albert Brown" },{ value:"Mono Delorini" },{ value:"Sergey Bobrovski" }, { value:"Mikita Alaev" }
      ], minWidth:320, select:true },
      { view:"list", data:[
        { value:"Accounts" },{ value:"History" },{ value:"Settings" }
      ], minWidth:320, select:true },
      {   
        template:"Try to resize screen, or open this sample on a mobile device",
        minWidth:320, minHeight:600, scroll:false
      },
      {
        template:"column 3", minWidth:320, minHeight:600, scroll:false
      }
    ]
  };

  webix.ui({
    rows:[
      { template:"My App", type:"header" },
      { cols:[
        { view:"scrollview", body:flex },
        { view:"resizer" },
        { }
      ]},
      { template:"Status: all data is saved", height:30}
    ]
  });
})