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