Vertical Layout Styling
Styling API reference for the Vertical Layout component.
Style Variants
Vertical Layout supports the following style variants:
| Variant | Supported by |
|---|---|
| Aura, Lumo |
| Aura, Lumo |
| Aura, Lumo |
| Aura, Lumo |
Spacing
Spacing is used to create space between components in the same layout. Spacing can help prevent misclicks and distinguish content areas.
Source code
VerticalLayoutSpacing.java
package com.vaadin.demo.component.verticallayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("vertical-layout-spacing")
public class VerticalLayoutSpacing extends Div {
public VerticalLayoutSpacing() {
HorizontalLayout parent = new HorizontalLayout();
parent.getStyle().setBorder("0");
add(parent);
Div wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout without spacing:"));
parent.add(wrapper);
// tag::snippet[]
// VerticalLayout has spacing enabled by default, use setSpacing to
// disable it
VerticalLayout layoutWithoutSpacing = new VerticalLayout();
layoutWithoutSpacing.setSpacing(false);
// end::snippet[]
layoutWithoutSpacing.setAlignItems(FlexComponent.Alignment.STRETCH);
Div item1 = new Div("Item 1");
item1.setClassName("example-item");
Div item2 = new Div("Item 2");
item2.setClassName("example-item");
Div item3 = new Div("Item 3");
item3.setClassName("example-item");
layoutWithoutSpacing.add(item1, item2, item3);
wrapper.add(layoutWithoutSpacing);
wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout with spacing:"));
parent.add(wrapper);
VerticalLayout layoutWithSpacing = new VerticalLayout();
layoutWithSpacing.setAlignItems(FlexComponent.Alignment.STRETCH);
Div spacingItem1 = new Div("Item 1");
spacingItem1.setClassName("example-item");
Div spacingItem2 = new Div("Item 2");
spacingItem2.setClassName("example-item");
Div spacingItem3 = new Div("Item 3");
spacingItem3.setClassName("example-item");
layoutWithSpacing.add(spacingItem1, spacingItem2, spacingItem3);
wrapper.add(layoutWithSpacing);
setClassName("basic-layouts-example");
}
}
vertical-layout-spacing.tsx
import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
import layoutExampleStyle from './layoutExampleStyle';
function Example() {
return (
<HorizontalLayout theme="spacing" style={{ border: '0' }}>
<div style={{ width: '100%' }}>
<p>Vertical layout without spacing:</p>
<VerticalLayout theme="padding" style={{ alignItems: 'stretch' }}>
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
</VerticalLayout>
</div>
<div style={{ width: '100%' }}>
<p>Vertical layout with spacing:</p>
{/* tag::snippet[] */}
<VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch' }}>
{/* end::snippet[] */}
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
{/* tag::snippet[] */}
</VerticalLayout>
{/* end::snippet[] */}
</div>
</HorizontalLayout>
);
}
vertical-layout-spacing.ts
import '@vaadin/horizontal-layout';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('vertical-layout-spacing')
export class Example extends LitElement {
connectedCallback() {
super.connectedCallback();
this.classList.add('basic-layouts-example');
}
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-horizontal-layout theme="spacing" style="border: 0">
<div style="width: 100%">
<p>Vertical layout without spacing:</p>
<vaadin-vertical-layout theme="padding" style="align-items: stretch">
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
</vaadin-vertical-layout>
</div>
<div style="width: 100%">
<p>Vertical layout with spacing:</p>
<!-- tag::snippet[] -->
<vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
<!-- end::snippet[] -->
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
<!-- tag::snippet[] -->
</vaadin-vertical-layout>
<!-- end::snippet[] -->
</div>
</vaadin-horizontal-layout>
`;
}
}
Five different spacing style variants are available:
Source code
vertical-layout-spacing-variants.ts
import '@vaadin/radio-group';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { RadioGroupValueChangedEvent } from '@vaadin/radio-group';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('vertical-layout-spacing-variants')
export class Example extends LitElement {
connectedCallback() {
super.connectedCallback();
this.classList.add('basic-layouts-example');
}
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
// tag::snippet[]
@state()
private themeVariant = 'spacing-xl';
protected override render() {
return html`
<vaadin-vertical-layout
theme="${this.themeVariant} padding"
class="height-5xl"
style="align-items: stretch"
>
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
</vaadin-vertical-layout>
<vaadin-radio-group
label="Spacing variant"
.value="${this.themeVariant}"
@value-changed="${(event: RadioGroupValueChangedEvent) => {
this.themeVariant = event.detail.value;
}}"
>
<vaadin-radio-button value="spacing-xs" label="spacing-xs"></vaadin-radio-button>
<vaadin-radio-button value="spacing-s" label="spacing-s"></vaadin-radio-button>
<vaadin-radio-button value="spacing" label="spacing"></vaadin-radio-button>
<vaadin-radio-button value="spacing-l" label="spacing-l"></vaadin-radio-button>
<vaadin-radio-button value="spacing-xl" label="spacing-xl"></vaadin-radio-button>
</vaadin-radio-group>
`;
}
// end::snippet[]
}
| Style Variant | Usage Recommendation |
|---|---|
| Extra-small space between items. |
| Small space between items. |
| Medium space between items. |
| Large space between items. |
| Extra-large space between items. |
Source code
Java
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(false);
layout.getThemeList().add("spacing-xs");Java
tsx
<VerticalLayout theme="spacing-xs padding">
</VerticalLayout>tsx
HTML
<vaadin-vertical-layout
theme="spacing-xs padding">
</vaadin-vertical-layout>HTML
Alternatively, the spacing can be set to a custom value:
Source code
Java
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(12, Unit.PIXELS);Java
tsx
<VerticalLayout style={{ gap: '12px' }}>
</VerticalLayout>tsx
HTML
<vaadin-vertical-layout style="gap: 12px">
</vaadin-vertical-layout>HTML
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 style variant.
Source code
VerticalLayoutPadding.java
package com.vaadin.demo.component.verticallayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("vertical-layout-padding")
public class VerticalLayoutPadding extends Div {
public VerticalLayoutPadding() {
HorizontalLayout parent = new HorizontalLayout();
parent.getStyle().setBorder("0");
add(parent);
Div wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout without padding:"));
parent.add(wrapper);
// tag::snippet[]
// VerticalLayout has padding enabled by default, use setPadding to
// disable it
VerticalLayout layoutWithoutPadding = new VerticalLayout();
layoutWithoutPadding.setPadding(false);
// end::snippet[]
layoutWithoutPadding.setAlignItems(FlexComponent.Alignment.STRETCH);
Div item1 = new Div("Item 1");
item1.setClassName("example-item");
Div item2 = new Div("Item 2");
item2.setClassName("example-item");
Div item3 = new Div("Item 3");
item3.setClassName("example-item");
layoutWithoutPadding.add(item1, item2, item3);
wrapper.add(layoutWithoutPadding);
wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout with padding:"));
parent.add(wrapper);
VerticalLayout layoutWithPadding = new VerticalLayout();
layoutWithPadding.setAlignItems(FlexComponent.Alignment.STRETCH);
Div paddingItem1 = new Div("Item 1");
paddingItem1.setClassName("example-item");
Div paddingItem2 = new Div("Item 2");
paddingItem2.setClassName("example-item");
Div paddingItem3 = new Div("Item 3");
paddingItem3.setClassName("example-item");
layoutWithPadding.add(paddingItem1, paddingItem2, paddingItem3);
wrapper.add(layoutWithPadding);
setClassName("basic-layouts-example");
}
}
vertical-layout-padding.tsx
import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
function Example() {
return (
<HorizontalLayout theme="spacing" style={{ border: '0' }}>
<div style={{ width: '100%' }}>
<p>Vertical layout without padding:</p>
<VerticalLayout theme="spacing" style={{ alignItems: 'stretch' }}>
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
</VerticalLayout>
</div>
<div style={{ width: '100%' }}>
<p>Vertical layout with padding:</p>
{/* tag::snippet[] */}
<VerticalLayout theme="padding spacing" style={{ alignItems: 'stretch' }}>
{/* end::snippet[] */}
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
{/* tag::snippet[] */}
</VerticalLayout>
{/* end::snippet[] */}
</div>
</HorizontalLayout>
);
}
vertical-layout-padding.ts
import '@vaadin/horizontal-layout';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('vertical-layout-padding')
export class Example extends LitElement {
connectedCallback() {
super.connectedCallback();
this.classList.add('basic-layouts-example');
}
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-horizontal-layout theme="spacing" style="border: 0">
<div style="width: 100%">
<p>Vertical layout without padding:</p>
<vaadin-vertical-layout theme="spacing" style="align-items: stretch">
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
</vaadin-vertical-layout>
</div>
<div style="width: 100%">
<p>Vertical layout with padding:</p>
<!-- tag::snippet[] -->
<vaadin-vertical-layout theme="padding spacing" style="align-items: stretch">
<!-- end::snippet[] -->
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
<!-- tag::snippet[] -->
</vaadin-vertical-layout>
<!-- end::snippet[] -->
</div>
</vaadin-horizontal-layout>
`;
}
}
Margin
Margin is the space around a layout. This is different from Padding, which is explained in the previous section.
Source code
VerticalLayoutMargin.java
package com.vaadin.demo.component.verticallayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("vertical-layout-margin")
public class VerticalLayoutMargin extends Div {
public VerticalLayoutMargin() {
HorizontalLayout parent = new HorizontalLayout();
parent.getStyle().setBorder("0");
add(parent);
Div wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout without margin:"));
parent.add(wrapper);
Div container = new Div();
container.setClassName("container");
wrapper.add(container);
VerticalLayout layoutWithoutMargin = new VerticalLayout();
layoutWithoutMargin.setWidth("auto");
layoutWithoutMargin.setAlignItems(FlexComponent.Alignment.STRETCH);
Div item1 = new Div("Item 1");
item1.setClassName("example-item");
Div item2 = new Div("Item 2");
item2.setClassName("example-item");
Div item3 = new Div("Item 3");
item3.setClassName("example-item");
layoutWithoutMargin.add(item1, item2, item3);
container.add(layoutWithoutMargin);
wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout with margin:"));
parent.add(wrapper);
container = new Div();
container.setClassName("container");
wrapper.add(container);
// tag::snippet[]
VerticalLayout layoutWithMargin = new VerticalLayout();
layoutWithMargin.setMargin(true);
// end::snippet[]
layoutWithMargin.setWidth("auto");
layoutWithMargin.setAlignItems(FlexComponent.Alignment.STRETCH);
Div marginItem1 = new Div("Item 1");
marginItem1.setClassName("example-item");
Div marginItem2 = new Div("Item 2");
marginItem2.setClassName("example-item");
Div marginItem3 = new Div("Item 3");
marginItem3.setClassName("example-item");
layoutWithMargin.add(marginItem1, marginItem2, marginItem3);
container.add(layoutWithMargin);
setClassName("basic-layouts-example");
}
}
vertical-layout-margin.tsx
import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
function Example() {
return (
<HorizontalLayout theme="spacing" style={{ border: '0' }}>
<div style={{ width: '100%' }}>
<p>Vertical layout without margin:</p>
<div className="container">
<VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch' }}>
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
</VerticalLayout>
</div>
</div>
<div style={{ width: '100%' }}>
<p>Vertical layout with margin:</p>
<div className="container">
{/* tag::snippet[] */}
<VerticalLayout theme="margin spacing padding" style={{ alignItems: 'stretch' }}>
{/* end::snippet[] */}
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
{/* tag::snippet[] */}
</VerticalLayout>
{/* end::snippet[] */}
</div>
</div>
</HorizontalLayout>
);
}
vertical-layout-margin.ts
import '@vaadin/horizontal-layout';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('vertical-layout-margin')
export class Example extends LitElement {
connectedCallback() {
super.connectedCallback();
this.classList.add('basic-layouts-example');
}
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-horizontal-layout theme="spacing" style="border: 0">
<div style="width: 100%">
<p>Vertical layout without margin:</p>
<div class="container">
<vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
</vaadin-vertical-layout>
</div>
</div>
<div style="width: 100%">
<p>Vertical layout with margin:</p>
<div class="container">
<!-- tag::snippet[] -->
<vaadin-vertical-layout theme="margin spacing padding" style="align-items: stretch">
<!-- end::snippet[] -->
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
<!-- tag::snippet[] -->
</vaadin-vertical-layout>
<!-- end::snippet[] -->
</div>
</div>
</vaadin-horizontal-layout>
`;
}
}
Wrapping
By default, components in a layout either shrink or overflow when there isn’t enough vertical space. Enable wrapping to allow components to flow onto a new column when space runs out, preventing overflow.
Source code
VerticalLayoutWrapping.java
package com.vaadin.demo.component.verticallayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("vertical-layout-wrapping")
public class VerticalLayoutWrapping extends Div {
public VerticalLayoutWrapping() {
HorizontalLayout parent = new HorizontalLayout();
parent.setSpacing(true);
parent.setMargin(true);
parent.getElement().getStyle().setBorder("0");
Div wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout without wrapping:"));
VerticalLayout layoutWithoutWrap = new VerticalLayout();
layoutWithoutWrap.setPadding(true);
layoutWithoutWrap.setSpacing(true);
layoutWithoutWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
layoutWithoutWrap.setHeight("200px");
Div item1 = new Div("Item 1");
item1.setClassName("example-item");
Div item2 = new Div("Item 2");
item2.setClassName("example-item");
Div item3 = new Div("Item 3");
item3.setClassName("example-item");
Div item4 = new Div("Item 4");
item4.setClassName("example-item");
layoutWithoutWrap.add(item1, item2, item3, item4);
wrapper.add(layoutWithoutWrap);
parent.add(wrapper);
wrapper = new Div();
wrapper.setWidthFull();
wrapper.add(new Paragraph("Vertical layout with wrapping:"));
// tag::snippet[]
VerticalLayout layoutWithWrap = new VerticalLayout();
layoutWithWrap.setWrap(true);
// end::snippet[]
layoutWithWrap.setPadding(true);
layoutWithWrap.setSpacing(true);
layoutWithWrap.setAlignItems(FlexComponent.Alignment.STRETCH);
layoutWithWrap.setHeight("200px");
Div wrapItem1 = new Div("Item 1");
wrapItem1.setClassName("example-item");
Div wrapItem2 = new Div("Item 2");
wrapItem2.setClassName("example-item");
Div wrapItem3 = new Div("Item 3");
wrapItem3.setClassName("example-item");
Div wrapItem4 = new Div("Item 4");
wrapItem4.setClassName("example-item");
layoutWithWrap.add(wrapItem1, wrapItem2, wrapItem3, wrapItem4);
wrapper.add(layoutWithWrap);
parent.add(wrapper);
this.setClassName("basic-layouts-example");
this.add(parent);
}
}
vertical-layout-wrapping.tsx
import { HorizontalLayout, VerticalLayout } from '@vaadin/react-components';
function Example() {
return (
<HorizontalLayout theme="spacing margin" style={{ border: 0 }}>
<div style={{ width: '100%' }}>
<p>Vertical layout without wrapping:</p>
<VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch', height: '200px' }}>
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
<div className="example-item">Item 4</div>
</VerticalLayout>
</div>
<div style={{ width: '100%' }}>
<p>Vertical layout with wrapping:</p>
{/* tag::snippet[] */}
<VerticalLayout
theme="wrap spacing padding"
style={{ alignItems: 'stretch', height: '200px' }}
>
{/* end::snippet[] */}
<div className="example-item">Item 1</div>
<div className="example-item">Item 2</div>
<div className="example-item">Item 3</div>
<div className="example-item">Item 4</div>
{/* tag::snippet[] */}
</VerticalLayout>
{/* end::snippet[] */}
</div>
</HorizontalLayout>
);
}
vertical-layout-wrapping.ts
import '@vaadin/vertical-layout';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('vertical-layout-wrapping')
export class Example extends LitElement {
connectedCallback() {
super.connectedCallback();
this.classList.add('basic-layouts-example');
}
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-horizontal-layout theme="margin spacing" style="border: 0;">
<div style="width: 100%;">
<p>Vertical layout without wrapping:</p>
<vaadin-vertical-layout
theme="spacing padding"
style="align-items: stretch; height: 200px;"
>
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
<div class="example-item">Item 4</div>
</vaadin-vertical-layout>
</div>
<div style="width: 100%;">
<p>Vertical layout with wrapping:</p>
<!-- tag::snippet[] -->
<vaadin-vertical-layout
theme="wrap spacing padding"
style="align-items: stretch; height: 200px;"
>
<!-- end::snippet[] -->
<div class="example-item">Item 1</div>
<div class="example-item">Item 2</div>
<div class="example-item">Item 3</div>
<div class="example-item">Item 4</div>
<!-- tag::snippet[] -->
</vaadin-vertical-layout>
<!-- end::snippet[] -->
</div>
</vaadin-horizontal-layout>
`;
}
}
Style Properties
The following style properties can be used in CSS stylesheets to customize the appearance of this component.
To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector.
See Component Style Properties for more information on style properties.
| Property | Supported by |
|---|---|
| Aura, Lumo |
| Aura, Lumo |
| Aura, Lumo |
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-vertical-layout