Flex Layout - Fullpage Mode, programming examples of Flex Layout - Fullpage Mode

Home
Examples
Flex Layout - Fullpage Mode

Flex Layout - Fullpage Mode

The programming sample below allows creating flex layouts for web apps in a full page mode. JavaScript Layout UI widget determines how different components are placed on the page. With this piece of code you can use flex layout as a top level view, which is great for mobile apps. Don't miss the chance to use other free code samples by Webix in order to accelerate the process of web development.

JS Code

/*
  Try resizing the browser window or open it on a mobile device. 
  "FlexLayout" and its elements will adjust to its container size.
*/

webix.ready(function(){
  webix.Touch.disable(true);

  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:250, 
        select:true 
      },
      { 
        view:"list", 
        data:[
          { value:"Accounts" },
          { value:"History" },
          { value:"Settings" }
        ], 
        minWidth:250, 
        select:true 
      },
      {   
        minWidth:350, minHeight:200
      },
      {
        template:"column 3", 
        minWidth:350, minHeight:200
      }
    ]
  };

  webix.ui(flex);
  webix.ui.fullScreen();
})

How to create a flex layout in a full page mode?

Download Webix UI Framework

Study Layout Documentation

Check out Layout Widget Features