hbox

LIVE DEMO

hbox lays out all nested components in a single horizontal row.

XML Element

hbox

Java Class

HorizontalLayout

Attributes

id - alignItems - alignSelf - boxSizing - classNames - clickShortcut - colspan - css - enabled - expand - height - justifyContent - margin - maxHeight - maxWidth - minHeight - minWidth - padding - spacing - themeNames - visible - width

Handlers

AttachEvent - ClickEvent - DetachEvent

Elements

endSlot - middleSlot - startSlot

Basics

An example of arranging three components in a single row:

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

Horizontal Alignment

Horizontal alignment of items can be achieved in two ways: by aligning individual items or by justifying the content.

Aligning Individual Items

hbox allows you to add child components to different designated areas, or slots. These items can then be aligned to the start, center, or end of the layout container.

hbox slots

Components can be placed in different alignment slots using the following approaches:

  • XML Configuration

    <hbox id="horizontalBox" width="100%" height="100%">
    <startSlot>
        <textField label="Start component"/>
    </startSlot>
    <middleSlot>
        <textField label="Middle component"/>
    </middleSlot>
    <endSlot>
        <textField label="End component"/>
    </endSlot>
</hbox>

    To add slot in Jmix Studio, select hbox in the view descriptor XML or in the Jmix UI structure panel and click on the Add button in the Jmix UI inspector panel.

  • Programmatic Setup

    @ViewComponent
private HorizontalLayout horizonsBox;

@Autowired
private UiComponents uiComponents;

@Subscribe
public void onInit(final InitEvent event) {
    horizonsBox.addToStart(createTextField("Start component"));
    horizonsBox.addToMiddle(createTextField("Middle component"));
    horizonsBox.addToEnd(createTextField("End component"));
}

private TypedTextField<String> createTextField(String label) {
    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel(label);
    return textField;
}

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.

Attributes

In Jmix there are many common attributes that serve the same purpose for all components.

The following are attributes 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.

-

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. See Justification.

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

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.

See Also

See Vaadin Docs for more information.