VBOX item type

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

VBOX item basics

The VBOX container automatically packs the contained elements vertically from top to bottom.

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 a VBOX container.

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

Defining an VBOX

A VBOX is defined in a LAYOUT tree, as VBOX container for other form items. It can for example be combined with an HBOX 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

HBOX and VBOX containers can be combined to implement responsive layout, by using the ORIENTATION@screen-size attribute.

When the HBOX or VBOX has an horizontal orientation, it can be rendered as a splitview by setting the SPLIT@screen-size attribute.

HBOX and VBOX with horizontal orientation and SPLIT attribute can be decorated with nativation arrows and/or navigation dots. These can respectively be controlled with the navigationArrows and navigationDots style attributes.

By default, when there is no stretchable child element such as a TABLE, space is inserted between any two elements. If needed, you can set the packed style attribute to "yes", in order to pack the elements to the left or top of the box container, depending on the orientation. For a vertical box, elements are packed to the top. For an horizontal box, elements are packed to the left.

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, HBox style attributes and VBox style attributes.