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.
Responsive Vertical/Horizonal/Css/Responsive Layout
Is it possible to use Vertical- or HorizontalLayout containers to achieve the responsive layout?
Or do we need to use CssLayout for that (like shown in the example https://vaadin.com/api/com/vaadin/server/Responsive.html)?
And the second question:
The responsive layout add-on (https://vaadin.com/directory#!addon/responsive-layout) can do the same responsiveness with less flexibility, than the normal way (using the CssLayout and styling manually), right?
For the first question, yes. You can use VerticalLayout or HorizontalLayout with Responsive and use different styles on them with different widths and heights. Like follows:
java:
final VerticalLayout layout = new VerticalLayout();
layout.setResponsive(true);
layout.addStyleName("ver");
scss:
.ver[width-range~="0-460px"] {
background: blue;
}
.ver[width-range~="461px-"] {
background: green;
}
This will give you a different background color on differend widths.
You can't really do responsive layouting with them, though. Whatever you do with it, VerticalLayout is still going to layout components vertically and HorizontalLayout will layout horizontally. They're non-responsive by design, you could say.
For the second question, I haven't tried the add-on live, but that's the impression I get. It's basically a grid-type layout that allows you to define some columns in Java side that might collapse based on a few fixed width categories.
-Olli
It seems like the example above doesn't work (anymore) ?
java: cannot find symbol
symbol: method setResponsive(boolean)
location: variable divider of type com.vaadin.flow.component.orderedlayout.HorizontalLayout
There is no method called setResponsive? is there a new way to make it work?
thanks
Hi Magnus. This is a post about Vaadin Framework (== Vaadin versions below 10), where that method existed.
Vaadin flow (== Vaadin 10+) does no longer have this method. But Horizontal- and VerticalLayout are now using flexbox so you can utilize all flexbox configurations to achieve some responsive behaviour of child components.
There is also always the possibility to make the site responsive on the client side instead of server side, by using CSS Media Queries
For Vaadin 14 there is a training for everything related to responsive layouts