Fixed-Width Columns GridLayout

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

I use GridLayout as a Table replacement because Table doesn’t support colspan or rowspan which GridLayout “does”.

Unfortunately, it seems GridLayout only supports to set the expand ratio of a column but it doesn’t support to set a column to a fixed width (as Table can).

Does someone have an idea how I could get fixed width column-widths in a GridLayout?

Thank you!
Thomas

2

Hi,

I think there’s no simple way to set it, but you could set the components within the column you want to size to a certain fixed size (e.g. 100px) and leave the column expand ratio for that column unset. The column should then be sized to 100px width, assuming that either the width of the GridLayout is undefined OR there is at least one column with a >0 column expand ratio that will get the “extra” width available.

3

Indeed, after looking lots of different Vaadin versions, it appeared you
were
 right …

There are soooo many changes in e.g. VGridLayout … It’s almost a wonder Vaadin 7 runs so smoothly …

In some older versions (7.0.0beta3 or something like this) there really was the behaviour of setting the component size of a cell for archiving minimum column widths.

At this time, VGridLayout extended SimpleLayout which isn’t the case anymore. Almost
everything
 was rewritten and so functionality got lost.

Setting the width of a cell-component only leads to white gaps on the right of the component, but the column width is only determined by expandratio and gridlayout-width …

I think this is a code regression and I should file a bug report, because in some older versions it obviously worked …

4

Ok, sorry, I assumed you were using V6. I personally have not worked that much with the GridLayout in V7.

However, if the following doesn’t do what you want in V7 you should definitely file a bug ticket:

  • Create a GridLayout with 2 columns and 1 row (for the sake of a simple example).
  • Set a defined width to the GridLayout (e.g. 600px or 100%)
  • Add a component with a fixed width to first column (e.g. a 100px wide Label)
  • Set a column expand ratio >0 for the second column.

This should result in a defined-width GridLayout with the first column being 100px wide and the second expanding to fill the rest of the available width.

5

I
finally
 got it to work … It cost about two days of work to figure out … hmpf!

it works if:

  • all columns (except the fixed width columns) must have expandratio set
  • fixed size columns must have expandratio of 0
  • the sum of all expandratios must be 100% (1.0)
  • the elements of fixed width columns must have a size set

Then, it works like I hopen …

Very annoying :wink:

6

Should not be that difficult. You should not need to explicitly set the 0 expand ratio. Also, the sum should not need to equal 1.0.

The following works fine for me on Vaadin 7.0.0, resulting in a 100px wide first column and a second column that occupies the rest of the space.

GridLayout g = new GridLayout(2, 2);
g.setWidth("100%");

Label l = new Label("fixed");
l.setWidth("100px");
g.addComponent(l);

l = new Label("expanding");
g.addComponent(l);

l = new Label("test");
g.addComponent(l);

g.setColumnExpandRatio(1, 500);

Note that the second label in the first column has the default 100% width, but the first column still takes it width from the 100px wide label.

7

Thank you for example.

I’m quite puzzled … Your code shows almost exactly, what I tried first …

I’ll have a closer look on this problem … It would be interesting why it didn’t work for me …