-2

My understanding was that one of the main themes of Vaadin 10+ was responsive layout. So I was surprised when the "Horizontal Layout" and "Vertical Layouts" do not seem to support responsive design. (I switched to using App Layout, and that seems to work.) HOWEVER, within my app layout, I tend to use Vertical Layouts and Horizontal Layouts to place polymer components -- I presume they will NOT be responsive, though, since I don't think the Vaadin horizontal/vertical layouts follow the responsive theme. Is there an alternative layout component that we should use that more-or-less implements a "horizontal layout that's responsive" etc.?

Related to this, is it reasonable to assume that all the prebuilt Vaadin 10/12+ polymer components (other than the horizontal and vertical layout) are automatically responsive, such as grid and forms and tabs, so that, for example, if a user is on his phone and is looking a tab which has forms that these Vaadin components would render "nicely" (ie following the responsive layout of other frameworks such as react.js) on the phone?

Jonathan Sylvester
  • 1,275
  • 10
  • 23

1 Answers1

7

A horizontal or vertical layout is by definition not responsive. Its purpose is to put all children on the same line, either vertically or horizontally, regardless of screen size.

Individual components in Vaadin 10 and newer are responsive where appropriate. As an example, the calendar popup in Date Picker automatically switches between full screen and regular mode depending on the used device. Other components such as Grid cannot know what's appropriate in any given case. It's instead the application developer's responsibility to e.g. configure which columns to use depending on the circumstances.

Positioning different components relative to each other depending on the screen size is always depending on per-application design that cannot be handled by generic components. There are some components that help achieving this for some specific cases, e.g Form Layout, App Layout and Board.

If the generic patterns offered by the provided layouts are not suitable, then the application developer needs to manually configure components differently depending on the case or write CSS that adapts to the screen size. This is still much easier in Vaadin 10+ compared to older version since older versions were heavily relying on pixel calculations that were applied as inline styles that conflicted with attempts of more dynamic definitions applied from CSS.

Leif Åstrand
  • 7,820
  • 13
  • 19