vbox

vbox arranges nested components vertically.

XML Element

vbox

Java Class

VerticalLayout

Overview

vbox basic

Basics

LIVE DEMO

The example arranges several components in one column:

<vbox>
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</vbox>

Attributes

Common attributes serve the same purpose for all components.

The following attributes are specific to vbox:

Name Description Default

boxSizing

Sets how the total width and height of an element is calculated. Possible values are: UNDEFINED, CONTENT_BOX, BORDER_BOX. See also: MDN page about box-sizing.

UNDEFINED

expand

Specifies the ID of a child component whose flex-grow value is set to 1, allowing it to take up remaining vertical space.

—

justifyContent

Defines how the browser distributes space between and around content items. For usage examples, see Layout Rules.

START

margin

Adds margin outside the layout on all four sides. See margin on MDN.

false

padding

Adds padding inside the layout on all four sides. See padding on MDN.

true

spacing

Adds theme-defined spacing between child components.

true

wrap

When true, moves components to a new column when vertical space runs out. See Wrapping in the Vaadin documentation.

false

Handlers

Name Description

AttachEvent

Fires when the layout is attached to the UI.

ClickEvent

Fires when the layout is clicked.

DetachEvent

Fires when the layout is detached from the UI.

Elements

A vbox can contain components and layouts arranged in a vertical sequence.