Minimum Size for Layout's Cells, programming examples of Minimum Size for Layout's Cells

Home
Examples
Minimum Size for Layout's Cells

Minimum Size for Layout's Cells, programming examples of Minimum Size for Layout's Cells

With the programming sample bellow you'll be able to specify the minimum and maximum size for layout's cells. JavaScript Layout is a powerful widget that predefines the way different components are arranged on the page. This piece of code will help you regulate the height of layout's cells. Don't miss the chance to use free code samples by Webix if you want to accelerate the process of web development.

JS Code

var set1 = [
  { rows:[
    { view:"template", minHeight:50 },
    { view:"template"},
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", minHeight:50 },
    { view:"template", height: 25 },
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", minHeight:50 },
    { view:"template", gravity:10 },
    { view:"template", height: 50}
  ]}
];

var set2 = [
  { rows:[
    { view:"template", height:50 },
    { view:"template"},
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", height:50 },
    { view:"template", height: 25 },
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", height:50 },
    { view:"template", gravity:10 },
    { view:"template", height: 50}
  ]}
];	

var set3 = [
  { rows:[
    { view:"template", maxHeight:50 },
    { view:"template"},
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", maxHeight:50 },
    { view:"template", height: 25 },
    { view:"template", height: 50}
  ]},
  { rows:[
    { view:"template", maxHeight:50 },
    { view:"template", gravity:10 },
    { view:"template", height: 50}
  ]}
];	

webix.ui({
  view:"scrollview",
  body:{
    height:750,type:"space",
    rows:[
      { template:"minHeight:50" },
      { cols:set1, height:200, type:"wide"},
      { template:"maxHeight:50" },
      { cols:set3, height:200, type:"wide"},
      { template:"height:50" },
      { cols:set2, height:200, type:"wide" }
    ]
  }
});

How to define the minimum size for layout's cells?

Download Webix UI Framework

Study Layout Documentation

Check out Layout Widget Features