Panel does not grab remaining space in gridlayout(-slot)

Hey guys!

I hope you are all doing great.

I got stuck on a problem, which can be described as follows:

I have a main panel, to which I added a gridlayout with three columns and one row.
gridlayout-slot itself
has a panel as its content. The panel in each gridlayout-slot has its components set up in
a vertical layout. The vertical layout contains a table. The tables might differ in the number of rows, therefore the tables in each panel have different heights.
I hope you are still with me at his point :slight_smile:

The different heights of the tables unfortunately affect the height of the panels.
In the screenshot I am attaching to this post, you see that the third panel is shorter than the first two panels. This is because the table inside the third panel only contains one row, whereas the tables in the first and second contain two rows.
I hope you can still see the difference I did such an amazing job in paint. :wink:

My question is:

How can I adjust the height of third panel to the height of the other two without scretching the layout, i.e. keeping the margins the same, except the margin between the “Wählen-Checkbox” and the component above?

I’ve tried the setFullSIze() method, but apparently that doesn’t do the trick.
Do I have to solve this problem programmatically?

I primarily used scss for styling and formatting the layout and its components.

I’d be really happy, if someone could help me here.
I am not even sure, if this is the right thread, so please let me know my issue fits in best.

Have a good day!

Thank you so much in advance!



If I understand your issue correctly, this problem has no solution in Vaadin or HTML.
You need some compromise. For example, you have to set some height to the GridLayout, then setSizeFull will have an effect.

PS GridLayout seems to be an overkill here, a HorizontalLayout will suffice.

Hi Michael!

Thanks a ton for your quick reply!

By setting some height you mean setting a height in pixel or percentage?

Could you further ellaborate on your last remark regarding “Gridlayou seems to be an overkill…”

Could the problem be resolved if I approached it differently

(I think) he means a height in pixel. So you would have one one panel/table with a set height and all other with full so that they would choose a height relative to the one with the set height.

As you only have one with several columns gridlayout isn’t really necessary and will only cause your DOM tree to be more complex than you need. Using a HorizontalLayout you can even be more dynamic as you don’t have to predefine how many columns there will be.

I don’t know if I completely understood what you’re after but it seems like what you need is: Look for the biggest panel → set the heights of the other panels to be equal.
If that’s the case and you don’t mind writing custom client side code (in either gwt or Javascript) you could try creating a Component Extension (the Vaadin wiki has several tutorials on it).
I personally recently made a custom Javascript Extension which uses JQuery to get the height of a component and its parent layout and then calculate the percentual height which then is set to a third component (a floating div).

Again i don’t completely understand your whole usecase but it might be an option even though its not that easy.

Hey Marius!

The thing is we do need a gridlayout because we know that there are gonna be three columns, but on the other hand we do not know for sure how many rows there are gonna be. That was my mistake. I did not state that clearly in my first post. It has to grow dynamically.
I’ll give it another try to explain what the problem is:

In essence, we need the third panel to be the same height as the other two. If every table had the same number of rows, we we would not have this issue. But since we cannot take this for granted as shown in the screenshot the size of the panel depends on the size of the table inside it. We want the panels to be the same height no matter how many rows there are inside a table. If there are two rows inside the table, the “Wählen-Checkbox” at the bottom should be closer to the next component.
If there is just one row, the margin between the “Wählen-Checkbox” and the component should of course be larger.
To cut a long story short, the only thing that is moving downwards and expanding the THIRD (shorter) panel should be the “Wählen-Checkbox”. That would be the perfect solution.

It doesn’t matter if the height is in pixels or in percentage (pixels will probably be a better choice here), as long as it’s not null.

I understood correctly what you’re after, and it’s not possible to size the third panel by the height of the biggest one (except by writing a complex client-side sizing logic).

I’d suggest that you set a fixed height for the tables, by calling setPageLength (or setHeight), then they will all have the same height and look nice, probably the closest to what you want.

Regarding the GridLayout, you said there’s going to be one row, so I thought a HorizontalLayout is better here, but if you have more rows, maybe a GridLayout is indeed appropriate.


How are your panels set up: From your screenshot it looks like the first two have the same height. Are those using undefined heights?
I made a small test case with two Panels having undefined size and a component inside which “defines” its parents height by its size (in my case it was a panel with undefined size with a VerticalLayout with unefined size and a Label inside which has a Width of 100% and a height of 500px) the first 2 Panel were set up the same way. The third Panel has its height set to 100% and the content (the label) is smaller then the other ones. When launching the 3rd Panel will correctly expand to the size of the other panels.
If i would go as far as to set the second panels height also to 100% it would act like the 3rd one.

So if you know which panel is the biggest one you can set its height to undefined and all other panels should adjust accordingly.
If you don’t know that then i would recommend creating a javascript extension with JQuery. The Extension can then extend the gridlayout so that you can iterate over the gridlayout-slots in the javascript connector and find the panel with the biggest height. Then it might be enough to set that panels height to undefined without the need to specifically set the other ones height.

The “Wählen”-Check being on the bottom at all times can be done using css with position: absolute and bottom: 0 or some pixel number. You have to set position:relative to the panel or its layout though. For more information just look up position: absolute and floating divs on google.

Ok, thank you so much guys.

We will take all your pieces of advice into account. We really appreciate your help and keep you posted what solution worked best for us.
Maybe some guys from Vaadin also see my post and will come up with a different solution.

Again thanks a lot.