Horizontal Container

Horizontal container is a "grouping" mechanism to group one or more elements horizontally.

General Properties

You should set the positional properties only:

• left
• top

width and height are set automatically based on the child elements (total).

Adding Element

You add element by defining the + sign. Example:

#D1

+ image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }

For the element:

• You don't need to set positional properties like left or top. They are not taken into account.
• Maximum height of the children's height is being counted.
• All elements' width are summed up as the total width of the container.
• The element's width remains unchanged.

Example

+ hbox {

        left = 300

        top = 50%+310

        width = 20

        height = 100

#D1

        + image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }

#D2

        + image { left = 40 top = 20 width = 70 height = 70 file = "button_n.png" }

}

Notice the generated vertical box has:

• Ignored its width (20) and height (100) and went for max height (70) and total width (130) - no cropping
• Each child's left and top are ignored.
• Max height is determined by the biggest height of the all children.
• The container width is the sum of all widths from all children.

That's all about vertical containers.