Fill grid layout cell height for grid layout with undefined height

Vaadin 6 / 7 / 8 Framework UI
1

Hey, just lost a post that I wrote for 30 min :frowning:

I’m trying to build a card layout using panels and a grid layout. I want my panels to fill 100% of their cell height.
The problem is that the height of the grid layout is undefined. The panel’s height is also undefined. Setting any of those
to 100% doesn’t work since vaadin (obviously) ignores 100% height of componets it doesn’t know the size.
What happens is that the rows become bigger when the panels have 2 lines of title:

What I would like to happen is that the panels that are smaller in the cell, fill the rest of the space and stick to 100% height.
Forcing their height to 100% via css doesn’t work since their components placement is calculated by vaadin with fixed values.

I could and wanted to set the panels height to a fixed value, but pixels are not responsive, and vaadin doesn’t support vw nor vh.
Internal parts of the panel are already set to have and expand ratio, but vaadin keeps them small since the panel is set to occupy
the least space possible.

How can I achieve this even row height that I want? With even lateral spacing between elements? The only problem now is the vertical
spacing.

2

For now, I have solved this using a fixed pixel height for the panels. I still am interested in this problem though, since I wanted to have a dynamic vertical space that fit the biggest element or that choose its height according to the screen size.

3

Hi lucas

I am far from being a CSS expert but I think this is usually done by flex. I really can’t explain how it works, let alone give you working CSS, but I hope this information alone helps you until a more experienced CSS Ace comes around.

4

I have tried using Flex manually by using the theme to apply classes, and also using the directory addon FlexLayout. I couldn’t do it because even if the panel occupied the space I wanted, its children components where absoluetly postioned using wrongly calculated fixed positions. :frowning: