GridLayout - Set size using CSS


I would like to set the size of a GridLayout through CSS because it needs to be responsive for different screen sizes.

If I do so, unfotunately, the contents of the grid (rows & columns) get calculated according to the original/code size (not set through CSS).

Is there a way to get it working with setting the size through CSS?

Ok, I will reformulate my question here:

I am using a CssLayout as content of the PopupButton-Addon (!addon/popupbutton

I am setting the size of the popup-buttons panel using Css as it should be 100% wide for a certein screen size, and some other width for another screen size (e.g. 500px). The class I am assigning the size is “.v-popupview-popup” (like for the popupview).

Now inside my CssLayout I want to use other layouts (GridLayout, HorizontalLayout, etc.).
Unfortunately I get weird behaviours (e.g. the layouts not having the correct width, the alignement not set correctly, expanding components don’t work, etc.). I am not sure if I need the CssLayout, but I read through the Javadoc and it seems to be the way to go for Css-styling of a layout.

Is this technically possible using vaadin? A popupview whose size is set via Css and content that behaves normally??

May be one of the vaadin experts could at least say yes or no.
I am willing to provide a compilable example if it is needed, because this is slowly driving me crazy.

Do you use the
extension to enable responsive design for layouts?



Hey JDC,

Did you get this solved? If not, post the code example and I’ll try to help out.