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

Responsive Layout, programming examples of Responsive Layout

Responsive Layout, programming examples of Responsive Layout

Do you want your web app to have a responsive layout? Try this programming example that will enable layout structures to respond to the changes of window size by hiding and showing back views or moving them to another place in the layout. You are welcome to use our free coding samples or a snippet tool below to create responsive web applications.

JS Code

/*
  Try resizing the browser window and the elements will response to the changes.
*/

webix.ui({
  type:"space",
  id:"a1", 
  rows:[
    {
      type:"space",
      padding:0, 
      responsive:"a1", 
      cols:[
        { 
          view:"list", 
          data:["Users", "Reports", "Settings"],
          ready:function(){ 
            this.select(this.getFirstId()); 
          },
          select:true,
          scroll:false,
          width:120 
        },
        { template:"column 2", width:120 },
        { 
          view:"datatable", 
          scrollX: false,
          select:true, 
          columns:[
            { id:"title", fillspace:1 }, 
            { id:"votes"}
          ], 
          data:grid_data,
          minWidth:250 
        }
      ]
    }
  ]
});