HBOX item type

Defines a layout area to render child elements in horizontal direction.

HBOX item basics

The HBOX container automatically packs the contained elements horizontally from left to right.

Contained elements are packed in the order in which they appear in the LAYOUT section of the form file.

No decoration (border) is added when you use an HBOX container.

By combining VBOX and HBOX containers, you can define any alignment you choose.

Defining an HBOX

An HBOX is defined in a grid-based LAYOUT tree, as a container for other form items. It can for example be combined with a VBOX container, to pack form elements to be displayed in vertical and horizontal directions:

LAYOUT
  HBOX
    VBOX
      GROUP
         ...
      END
      TABLE
         ...
      END
    END
    VBOX
      ...
    END
  END
END

Front-ends support different presentation and behavior options, which can be controlled by a STYLE attribute. For more details, see Style attributes common to all elements and HBox style attributes.

Rendering an HBOX as a splitview

Some front-ends (see HBox presentation style attributes reference) allow to render HBOX elements as splitviews, when using the splitViewRendering style attribute:
<Style name="HBox.splitView" >
    <StyleAttribute name="splitViewRendering" value="yes" />
</Style>

The HBOX must contain only two elements such as a GRID and TABLE. If the width of the screen is large enough, both elements are displayed. When the width of the screen becomes too small, the HBOX is converted to a splitview displaying only one of the child elements at a time. The end user can then use platform-specific solutions (with a swipe gesture on mobile devices), to switch between the contained elements.

For more details, see Rendering an HBox as a splitview.

Where to use an HBOX

An HBOX form item can only be defined as an HBOX container in a LAYOUT tree, within a grid-based layout.
Note: An HBOX cannot be used inside a STACK container.
Important: Do not confuse the HBOX form item with the concept of Hbox tag, which is similar purpose but only for form item tags like labels and form fields.