Vertical Container

Vertical container is a "grouping" mechanism to group one or more elements vertically.

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 width of the children's width is being counted.
• All elements' height are summed up as the total height of the container.
• The element's height remains unchanged.

Example

+ vbox {

        left = 50%+310

        top = 50%-50

        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 width (70) and total height (130) - no cropping
• Each child's left and top are ignored.
• Max width is determined by the biggest width of all children.
• the container height is the sum of all heights from all children.

That's all about vertical containers.