vbox

LIVE DEMO

vbox lays out all nested components in a single vertical column.

XML Element

vbox

Java Class

VerticalLayout

Attributes

General: id - enabled - visible

Size: boxSizing - height - maxHeight - maxWidth - minHeight - minWidth - width

Position: alignItems - alignSelf - colspan - expand - justifyContent - spacing

Look & Feel: classNames - css - margin - padding - themeNames - wrap

Other: clickShortcut

Handlers

AttachEvent - ClickEvent - DetachEvent

Basics

An example of arranging three components in a single column:

<vbox id="vbox" >
    <textField placeholder="TextField"/>
    <button text="OK"/>
    <button text="Cancel"/>
</vbox>
vbox basic

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.

-

expand

Specifies a component within the layout that should be expanded to use all available space. In the case of hbox, this attribute sets the component’s width to 100%.

-

justifyContent

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

START

margin

Defines indentation between the outer borders and the container content. Possible values: true, false. See also: MDN page about margin.

false

padding

Sets the padding area on all four sides of an element at once. Possible values: true, false. See also: MDN page about padding.

false

spacing

Sets spacing between components within a layout. Possible values: true, false.

false

wrap

If true enables components to flow onto a new line when space runs out. See Wrapping in the Vaadin documentation.

false

Handlers

AttachEvent - ClickEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ClickEvent

com.vaadin.flow.component.ClickEvent is sent when the user clicks the layout.