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

Flex Layout - Fullpage Mode, programming examples of 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

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 
      },
      {   
        template:"Try to resize screen, or open this sample on a mobile device",
        minWidth:350, minHeight:200
      },
      {
        template:"column 3", 
        minWidth:350, minHeight:200
      }
    ]
  };

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