Layout is defined as the particular way components are arranged in your view.
To arrange the components in Vaadin Designer, you can use the layout components provided by Vaadin. You can combine and nest special purpose layouts and the more general-purpose Vertical and Horizontal layouts.
Additionally, you can define the sizes of the components as well as the empty space between them.
Vaadin supports many pre-built layout components for you to quickly start constructing a view.
Provides a quick and easy way to get a common application layout structure done. Allows setting the logo, menu and page content.
Provides a configurable responsive layout for form elements, making sure your form content stays easily readable on all devices.
Allows you to partition a layout into resizable areas.
Ordered Layout (Vertical layout, Horizontal layout)
Provides Horizontal and Vertical layouts to horizontally or vertically align your HTML elements.
The most flexible way to create a layout is by nesting these two layouts.
These are the most essential layouts, which can be nested under each other, or different layouts to construct more complex ones. For these layouts, Designer supports Flexbox editor to position their child elements.
|Flexbox editor uses CSS flexbox layout. To learn about Flexbox, check out this flexbox guide.|
Vertical and Horizontal layouts are flex containers.
You can also use native HTML elements (e.g.
div element) as flexbox containers
by setting their
display CSS property to
When selecting a flex container in Designer, the Flex Container panel appears near the bottom-right corner.
flex-direction CSS property,
defining the main-axis for child items. X-axis or Y-axis enables
row (horizontal) or
column (vertical) direction, respectively.
To reverse the current direction, enable
align-items CSS property,
defining how child items are laid out along the cross axis which runs perpendicular to the current main-axis.
justify-content CSS property,
defining how child items are aligned along the main-axis and how free spaces between them are distributed.
flex-wrap CSS property,
allowing child items to be wrapped onto multiple lines when they can’t be fitted in one line. To wrap items from bottom to top, enable
align-content CSS property,
this property appears only when child items can be wrapped.
Since wrapped items can occupy multiple lines, this property aligns those lines when there is an extra space.
Elements inside a flex container are flex items. The Flex Item panel appears when selecting a flex item. In case the selected item is also a flex container, both panels will be shown.
align-self CSS property,
allowing a specific flex item to override the Align setting of its parent container.
To give a component a specific size and define the empty space around and inside it, you can use the size and space panel located in the properties panel.
See the following figure for illustration.
When Lumo theme is in use, the margin, padding and spacing properties accept t-shirt sizes which translate to the corresponding |
Set width and height, as well as constrain their minimum and maximum values.
Set margin and padding. Setting
Padding will set the same value to all edges. Individual edges can be set or overridden by setting values to the