GridLayout - Set size using CSS

Hello,

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 (
https://vaadin.com/directory#!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
Responsive
extension to enable responsive design for layouts?

Thanks,

-Henri

Hey JDC,

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