Docs

Docs

Vertical Layout

Source: TypeScript / Java
Vertical Layout places components top-to-bottom in a column.

Vertical Layout places components top-to-bottom in a column. By default, it has a width of 100% and an undefined height. Its width is constrained by its parent component (i.e., it “fills” the available space). Whereas, its height is determined by the components it contains (i.e., it “hugs” its content).

See Horizontal Layout for information on placing components side-by-side.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

Components in a Vertical Layout can be aligned vertically, as you’d expect. However and perhaps surprisingly, they can also be aligned horizontally in a Vertical Layout.

Vertical Alignment

You can position components at the top, middle, or bottom. You can also position them by specifying how the excess space in a layout is distributed among them.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
Value Description

START (default)

Positions items at the top.

CENTER

Centers items, vertically.

END

Positions items at the bottom.

BETWEEN

Available space is distributed equally among items. However, no space is added before the first item, or after the last.

AROUND

Available space is distributed equally among items. However, the space before the first item and after the last is half of that between items.

EVENLY

Available space is distributed equally among items. The space before the first item and after the last item is the same as between others.

Horizontal Alignment

Components in a Vertical Layout are left-aligned by default, but can be centered, right-aligned or stretched horizontally.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.CENTER);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));
Value Description

START (default)

Left-aligns items for left-to-right language text (e.g., English). For right-to-left languages (e.g., Arabic, Hebrew), it right-aligns items.

CENTER

Centers items, horizontally.

END

Right-aligns for left-to-right language text. For right-to-left languages, it left-aligns items.

STRETCH

Stretches horizontally items with undefined width.

It’s also possible to align horizontally individual components by overriding the general alignment setting of the layout.

Open in a
new tab
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
button1.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
VerticalLayout layout = new VerticalLayout();
layout.add(button1);
layout.setAlignSelf(Alignment.END, button1);
layout.add(button2);
layout.setAlignSelf(Alignment.CENTER, button2);
layout.setAlignItems(FlexComponent.Alignment.START);
layout.add(new Button("Button 3"));

Spacing

Spacing is used to create space between components in the same layout. Spacing can help prevent misclicks and distinguish content areas.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Spacing");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setSpacing(ENABLED_OPTION.equals(e.getValue())));

Five different spacing theme variants are available:

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(false);
layout.getThemeList().add(SPACING_XL_THEME);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Spacing variant");
radioButtonGroup.setItems(SPACING_XS_THEME, SPACING_S_THEME,
        SPACING_THEME, SPACING_L_THEME, SPACING_XL_THEME);
radioButtonGroup.setValue(SPACING_XL_THEME);
radioButtonGroup.addValueChangeListener(e -> {
    layout.getThemeList().remove(e.getOldValue());
    layout.getThemeList().add(e.getValue());
});
Theme Variant Usage Recommendation

spacing-xs

Extra-small space between items.

spacing-s

Small space between items.

spacing

Medium space between items.

spacing-l

Large space between items.

spacing-xl

Extra-large space between items.

 
<vaadin-vertical-layout
  theme="spacing-xs padding">
</vaadin-vertical-layout>

Padding

Padding is the space allocated between the content in a layout and the outer border. This should not be confused with Margin, which is explained in the next section.

Padding can help distinguish the content in a layout from its surrounding. Padding is applied using the padding theme variant.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Padding");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setPadding(ENABLED_OPTION.equals(e.getValue())));

Margin

Margin is the space around a layout. This is different from Padding, which is explained in the previous section.

Open in a
new tab
VerticalLayout layout = new VerticalLayout();
layout.setWidth("auto");
layout.setMargin(true);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);
layout.add(new Button("Button 1"));
layout.add(new Button("Button 2"));
layout.add(new Button("Button 3"));

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
radioButtonGroup.setLabel("Margin");
radioButtonGroup.setItems(ENABLED_OPTION, DISABLED_OPTION);
radioButtonGroup.setValue(ENABLED_OPTION);
radioButtonGroup.addValueChangeListener(
        e -> layout.setMargin(ENABLED_OPTION.equals(e.getValue())));

73cc0e40-d39a-11ed-afa1-0242ac120002