Responsive CssLayout Nested in VerticalLayout

Hello,

Is it possible to have a Responsive Css Layout nested within a Vertical Layout?

Essentially my application has a Vertical Layout as the main component. This vertical layout has 2 components nested inside. The first is a horizontal layout which provides a header for the page. The second is a CssLayout which has panels that I want to resize responsively based on the window size, simiar to the responsive flexible wrapping demo here: https://vaadin.com/docs/-/part/framework/themes/themes-responsive.html#figure.theme.responsive.flexwrap

I’ve setup my css rules for the CssLayout just like the demo does: .flexwrap { overflow: scroll; } .flexwrap[width-range~="0-299px"] { .itembox {width: 100%} } .flexwrap[width-range~="300px-"] { .itembox {width: 50%} } .flexwrap[height-range~="0-299px"] { .itembox {height: 100%} } .flexwrap[height-range~="300px-"] { .itembox {height: 50%} } And I’ve called Responsive.makeResponsive(cssLayout) on my CssLayout and set the style of the CssLayout to “flexwrap” and “itembox” for the panels.

However panels within the CssLayout are always 100% width no matter what the window size is. The height is responding correctly, i.e. when the window height is between 0-299 px the panels have 100% height and when the window size is 300+ px the panels have 50% height.

Is there something I need to do to get the width to adjust responsively like the height?

Thanks,
Max

I’ve solved my problem if anyone else runs into this in the future. It seems as thought the panels that I was placing into the CssLayout have a default width of 100%, and that was overriding the responsive css styling. I’ve instead explicitly set the panels width/height undefined and then the responsive css works properly.

I think there might have been a change in bahavior for the default width between Vaadin 7 and 8 which was causing my confusion.

Thanks,
Max