Vaadin Responsive

Hello
Is it possible to automatically change components layout from VerticalLayout to HorizontalLayout when resolution increases, using Vaadin “responsive” plugin?

Hello Robert,

The Responsive add-on relies on CSS to adapt the UI layout to size changes. This means that you can not directly modify your component tree by replacing components or layouts. What you could do instead, is to use CSSLayout instead of HoriontalLayout / VerticalLayout and modify the css so that components flow from left to right instead of top to bottom when resolution is increased.

-Matti

I tried to modify some Vaadin components using CSSLayout but the CSS styling is not working for them. I used display:inline and display:block.

BR,
Robert

Hello Robert,

Actually you don’t need to do any css changes to achieve horizontal flow of components. Please have a look at https://vaadin.com/book/-/page/layout.csslayout.html.

BR,
Matti