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

Limits on Resizing, JavaScript Programming Example of Limits on Resizing

JavaScript Programming Example of Limits on Resizing

Check out our programming sample for setting Layout, more precisely, limits on resizing. Layout divides the page into rows and columns where all other components are placed. It's recommended to set minWidth and maxWidth parameters for columns and minHeight and maxHeight for the rows. This step prevents them from collapsing, as when the resizer line reaches minimal width or height, the resizer line cannot be moved anymore. Feel free to use coding samples by Webix.

JS Code

webix.ui({  
  rows:[    
    { template:"row 1",minHeight:30 },
    { view:"resizer" },
    { template:"row 2",minHeight:30 },
    { view:"resizer" },
    { cols:[
      {
        id:"a1",
        template:"column 1",
        width:150,
        minWidth:50,
        maxWidth:250
      },
      {
        view:"resizer",
        id:"resizer"
      },
      {	template:"column 2" },
      { template:"column 3" }
    ], minHeight:60
    }
  ]
});