This section will describe how to position items in a stack.
Placement of Stack Children
Normally, the child elements of a
stretch to fit the size of the stack. However, you may also place the children at specific coordinates. For example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge. The second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge.stack
The position of a child element may be specified by placing two attributes on the element. For the horizontal position, use the left
attribute and for the vertical position, use the top
attribute. If you don't put these attributes on a child of a stack, the child will stretch to fit the size of the stack.
<stack> <button label="Goblins" left="5" top="5"/> <button label="Trolls" left="60" top="20"/> <button label="Vampires" left="10" top="60"/> </stack>
The stack
here contains three elements, each positioned at the coordinates given by the left
and top
attributes. Here, all three children are buttons, but the elements do not have to be same type. They may be any element, including boxes and other stacks.
The size of a stack
is determined by the positions of the child elements. It is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore
). So if you set a left
attribute to 400, the stack will have a width around 400 pixels plus the width of the element. You can override this size with the various style properties such as width
and max-width
.
You can use a script to adjust the value of the left
and top
attributes and thus make the elements move around. Stacks have the advantage that when one absolutely positioned element changes its position, the position of the other elements is not affected. If you tried to move elements in a regular box, other elements might shuffle their positions around.
It is also possible to place the child elements so that they overlap. When drawing the child elements, the elements are shown in the order that they appear in the stack
. That is, the first child of the stack
appears at the back, the next child appears next and so on. The last element appears on top. You can use the DOM functions to move the order of the elements around.
When responding to mouse events, the elements on top will capture the events first. That means that if two buttons overlap, the top button will capture a mouse click where it covers the other one.
Width and Height
The bottom
and right
attributes can also be used in conjunction with top
and left
to set the width and/or height of the children of the stack
.
Note that bottom
and right
attributes, unlike rect, are relative to the bottom and right of the stack.
When using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set.
In this example, the resulting width of the top-most hbox will be 400px:
<stack width="600">
<hbox flex="1">
<!-- content -->
</hbox>
<hbox left="0" right="200"
>
<!-- Some content here. -->
</hbox>
</stack>
In some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results.
The next section describes tabboxes which are like decks but provide their own navigation.