Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Make css layout responsive
Hi all,
I have a problem with making my css layout responsize. What I have is the CssLayout as my content and two FormLayouts laid horizontal by default inside. What I want to do is when width of the browser is too small, the form from the right side goes vertically, on the botton of that one from the left side. And I've already done that, but only if I set size as undefined for both FormLayouts but when I do setSizeFull, the responsive wont't work. My problem is I need to setSizeFull the components inside of both FormLayout and FormLayouts either.
Here is my code:
final CssLayout content = new CssLayout();
content.addStyleName("css-layout");
content.setResponsive(true);
content.setWidth(MAX_SIZE);
final FormLayout leftSide = new FormLayout();
leftSide.setSizeUndefined(); // I need to delete that !! form is too small
leftSide.setMargin(new MarginInfo(true, true, true, true));
leftSide.addComponents(name,
shortName);
leftSide.addStyleName("left-form");
content.addComponent(leftSide);
final FormLayout rightSide = new FormLayout();
rightSide.setSizeUndefined(); // I need to delete that !! form is too small
rightSide.setMargin(new MarginInfo(true, true, true, true));
rightSide.addComponents(town, address);
rightSide.addStyleName("right-form");
content.addComponent(rightSide);
Panel wrap = new Panel();
wrap.setContent(content);
wrap.addStyleName("borderless");
Responsive.makeResponsive(content,leftSide,rightSide);
return wrap;
And here is my CSS :
.css-layout {
.left-form {
line-height: 30px;
padding: 5px;
}
.right-form {
vertical-align: top;
}
.right-form.left-form {
padding: 5px
}
}
.css-layout[width-range~="0-699px"] {
.right-form {width: 100%}
}
.css-layout[width-range~="700px-"] {
.right-form {width: 50%}
}
Thanks for all help.
regards
Dominik