Sizing with percentages / relative dimensions

Webix JS
1

How can one achieve a fluid/elastic layout by using percentages instead of exact pixel widths?

E.g. I’d like to have

webix.ui({
    rows: [
        { template:"Row 1", height: '20%' },
        { view:"resizer" },
        { cols:[ //2nd row, automatically calculated to 80% height
            { template:"Column 1", 'width: 30%' }, 
            { template:"Column 2"}  // width automatically calculated to 70%
        ]}	
    ]
});

The same feature would be great for item content in datatables.

Thanks, and Merry Christmas!

2

Thank you. Merry Christmas to you too!

Webix widgets can be sized on percent basis in the following ways:

Layouts:

Gravity defines how much a row/column is bigger than other children of its parent. By default gravity value is 1, which means that free space is evenly distributed by UI parts unless they feature a fixed size.

webix.ui({
    rows: [
        { template:"Row 1", gravity:0.2 },
        { view:"resizer" },
        { cols:[ //2nd row, automatically calculated to 80% height
            { template:"Column 1", gravity:0.3}, 
            { template:"Column 2"}  // width automatically calculated to 70%
        ]}  
    ]
});

http://webix.com/snippet/d9622f23

Check the docs at http://docs.webix.com/desktop__dimensions.html#relativesizing

Datatable/treetable:

The fillspace property defines how much a column is bigger than other columns. Though, by default, columns come with 100px width.

http://webix.com/snippet/c7ce672f

Check the docs at http://docs.webix.com/datatable__sizing.html#settingthefixedsize (Relative sizing section)

1 Like