GridLayout Bug !

Dear All,

I have found problem with GridLayout I have 2 columns set to “50%”

the component in the second column is not Alignment well.
I found the alignment of the second component is depending of the width of the 1st component in the 1st Column.
Maybe is not a bug, if not thank in advance for your help.

But if is a bug Thank to add this to Vaadin please, I can’t.

Best regards

Code to reproduce the “problem”

GridLayout gLayout = new GridLayout();
gLayout.setWidth(“100%”);
gLayout.setColumns(2);
gLayout.setRows(1);

gLayout.setColumnExpandRatio(0, 50);
gLayout.setColumnExpandRatio(1, 50);

TextField t1 = new TextField();
TextField t2 = new TextField();
TextField t3 = new TextField();
TextField t4 = new TextField();
t1.setWidth(“350px”);
gLayout.addComponent(t1,0,0);
gLayout.addComponent(t2,1,0);
GridLayout gLayout2 = new GridLayout();
gLayout2.setWidth(“100%”);
gLayout2.setColumns(2);
gLayout2.setRows(1);
gLayout2.setColumnExpandRatio(0, 50);
gLayout2.setColumnExpandRatio(1, 50);
gLayout2.addComponent(t3,0,0);
gLayout2.addComponent(t4,1,0);
this.addComponent(gLayout);
this.addComponent(gLayout2);
27201.png

I see your issue. Although it seems un-intuitive, I would not say it is a bug. The reason is the definition of expand ratios; they divide
extra
space, not the total space. Here the extra space is (width of grid)-(defined widths of children). Your first example has a defined width (350px), while your second doesn’t, so the space that is defined is different between the cases, resulting in different alignment.

Now, fixing it is another issue, and that very much depends on what you want the end result to be :slight_smile:

Hi Thomas,

Thanks for explanation,
what I would like to archive, is make sure all my component are well align (component in the right).

Best regards

Lino

Well, you could use GridLayout, but either 1) set the same size for all components in a column or 2) not set any size for any of the components. A second option is to have a horizontal layout with a few vertical (or form) layouts inside, this would align things as well, but not necessarily on the same row anymore. If you could post e.g. a design image of the layout you want, then I could give more detailed help.

Hi Thomas,

Thank for helping, see picture in attachment.

Bleu = Panel
Red = GridLayout
Gray = Component

I have try to not set size to any component but I have the same problem component on the right of the second or Panel are not align with component right of the 1st Panel

My page is created on the fly by reading a file (see ProcessExecution).

Thank for your help.

Regards

27202.txt (1.21 KB)
27203.png

OK. If you do not need to define the width of individual fields, then you can use the solution above (leaving them all unset). However, if you need to define widths, then you will need to wrap each of those components inside a layout (CSSLayout will do fine), where the layout width is undefined. Note that this will only work if the field width is defined as pixels, not percentage. The undefined sizes of the wrapper layouts will allow the GridLayout to do the expand properly.

If that doesn’t work, or you need relative field sizes, then your only option is to wrap (at least) one row of fields inside their own CSSlayouts, and set the width for those to 100%; that should force both columns to get 50% of the total.

Explaining this, I realize that we should probably do something to the API of the GridLayout. I’ve been using it for 8 years, so I rarely need to think about these things, but obviously there are improvements that we could make. I hope the above made some sense anyway :slight_smile:

Hi Thomas,

Thanks again, I try some of your options and see what is the best for my situation.

have a good day.

Regards
Lino