Rows layout width matching

Webix JS
1

When there are some widgets in a rows layout they expand to match the container width until one of the widgets has a defined width and then all widgets match this width.
Why is that?

Is there any option to keep other widgets expanded other than introducing a sublayout with columns?
Or maybe is there another container than layout that behaves in such a way that widgets keep expanding in such a scenario?

I found that for widgets like ‘text’ I can use ‘inputWidth’ instead of ‘width’ for the widget I want to keep narrow
but other widgets don’t give such option to prevent impacting another widgets.

Here is an example UI for this scenario for clarity:

<div id="root"></div>

webix.ui({
  rows:[
    { 
      view:'datatable', 
      width:500,
      columns:[
        { id:"title",   header:"Film title"},
      ],            
      data: [
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1}
      ]
    },
    // Does not expand it's width:
    { 
      view:'datatable', 
      columns:[
        { id:"title",   header:"Film title"},
      ],            
      data: [
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1}
      ]
    },        
  ]
}, document.getElementById('root'));
2

Hello @Tomasz ,

I understand that it could seem to be a bit redundant, however the recommended approach is to place your 1st table into a “cols” layer: Code Snippet .

Otherwise, as the tables are placed in one “rows” component which children share the same width dimension, it will take into account the fixed dimensions of the children and adjust to the table with a defined width:Sizing Components of Guides, Configuring Components Webix Docs .
With an additional “cols” layer, the “root” container’s width now will be divided between the table and a spacer and the fixed table’s width won’t affect the top “rows” width.

There is still one more option if you can set fixed dimensions for your 1st table.
Code Snippet - there is a special “align” view wrapper: Flexible Alignment of Widgets Content of Guides, Configuring Components Webix Docs , which will take the container’s width while the datatable will get the fixed one and will be aligned within this wrapper. This wrapper can help with widgets positioning inside some area, however, the widget inside should have clear dimensions so we set a height for it in the example.

1 Like
3

Hi,
Thank you for clarifying the recommended approach and for pointing out the possibility of using the align wrapper, which could also come in handy!

That definitely makes me less hesitant to introduce cols layers where appropriate in my configurations.