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.
Vertical Container

That's all about vertical containers.