hbox

hbox arranges nested components horizontally.

XML Element

hbox

Java Class

HorizontalLayout

Overview

hbox basic

Basics

LIVE DEMO

The example arranges several components in one row and aligns them along the cross axis with alignItems:

<hbox alignItems="CENTER" wrap="true">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</hbox>

Start, Middle, and End Slots

LIVE DEMO

Use the startSlot, middleSlot, and endSlot elements to place components at the corresponding positions within the available width:

<layout>
    <hbox width="100%">
        <startSlot>
            <span text="Span"/>
        </startSlot>
        <middleSlot>
            <textField placeholder="TextField"/>
            <button text="Button"/>
        </middleSlot>
        <endSlot>
            <button text="Button"/>
        </endSlot>
    </hbox>
</layout>

Content Justification

Justification modes define how items are distributed within the available horizontal space. The following modes are supported:

  • START (default)

    Aligns items to the left (for left-to-right languages) or to the right (for right-to-left languages).

  • CENTER

    Centers all items horizontally within the layout.

  • END

    Aligns items to the right (for left-to-right languages) or to the left (for right-to-left languages).

  • BETWEEN

    Distributes available space evenly between items. No extra space is added before the first item or after the last.

  • AROUND

    Distributes space evenly around items. The space before the first item and after the last is half the space between adjacent items.

  • EVENLY

    Distributes space evenly between all items, including before the first and after the last, ensuring equal spacing throughout.

Use the justifyContent attribute to set the justify content mode of the layout.

For usage examples, see Layout Rules.

Attributes

Common attributes serve the same purpose for all components.

The following attributes are specific to hbox:

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 horizontal space.

—

justifyContent

Defines how the browser distributes space between and around content items. See Justification.

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.

false

spacing

Adds theme-defined spacing between child components.

true

wrap

When true, moves components to a new row when horizontal 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

An hbox can contain components directly or group them in startSlot, middleSlot, and endSlot elements.

See Also