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

Home
Examples
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}
    ]
  });
})

How to ensure flexible layout?

Download Webix UI Framework

Study Layout Documentation

Check out Layout Widget Features