XUL Tutorial Study Notes - The Box Model

The Box Model

1. <hbox> and <vbox>, <box> with attribute orient(default horizontal and vertical).

Element Positioning

1. Flexible elements' default size is calculated the same as for inflexible elements, if you want your flexible elements stretch you have to define the parent box flexible too.

2. Properties minheight maxheight minwidth maxwidth are only useful for flexible elements, the same as CSS corresponding properties.

3. Box attribute pack (start, center, end) controls the positioning of children.

4. Flexibility is assumed by default in the other direction, to change the default, you have to use the align attribute(start, end, center, baseline only useful in horizontal, stretch).

5. You can also use the style properties -moz-box-align and -moz-box-pack instead.

6. Attribute corp(left, right, center, none for default) used for text ellipsis.

Box Model Details

1. Remember that flexibility only has meaning for elements that are directly in a box or an element that is a type of box.

Horizontal boxes

1. 1. Lay out their elements next to each other horizontally.
   2. Flexible elements are flexed horizontally.
   3. Packing controls their horizontal placement of child elements.
   4. Alignment controls how the row of elements are aligned vertically.

Vertical boxes

1. 1. Lay out their elements vertically in a column.
   2. Flexible elements are flexed vertically.
   3. Packing controls the vertical placement of child elements.
   4. Alignment controls how the column of child elements are aligned horizontally.

Groupboxes

1. Groupbox has a vertical orientation by default.

2. <groupbox> <caption>