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

Layout and Resizer, JavaScript Programming Example of Layout and Resizer

JavaScript Programming Example of Layout and Resizer

Get the programming example of setting resizer lines with the Webix UI library. A draggable border or so-called resizer line lies between rows and columns. You can move the borders in both directions to change the size of the components. Don't hesitate to apply our coding samples to your web development projects.

JS Code

webix.ui({
  rows:[
    { template:"row 1", height:35 },
    { template:"row 2" },
    { view:"resizer" },
    { template:"row 3" },
    { view:"resizer" },
    { cols:[
      {
        id:"a1",
        template:"column 1",
        width:150
      },
      {
        view:"resizer",
        id:"resizer"
      },
      {   
        template:"column 2"
      },
      {
        template:"column 3"
      }
    ]
    }
  ]
});