HBOX item type

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

<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