Responsive Vertical/Horizonal/Css/Responsive Layout

Vaadin 6 / 7 / 8
1

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?

2

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

3

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

4

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]
(https://css-tricks.com/snippets/css/a-guide-to-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]
(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

For Vaadin 14 there is [a training for everything related to responsive layouts]
(https://vaadin.com/learn/training/v14-responsive)