The tag groupbox should not be confused with a tag for grouping buttons
such as radiobox, which makes the buttons radio operator alternate.
In fact it is similar to the fieldset tag of HTML and has the same goal of presentation. In practice, it is a tag box which displays a border.
It is equipped with a particular subelement, caption, which displays a title as in HTML, or displays other components.
The content may be organized of course the contents with other box tags.
Elements of groupbox
Display a label or a group of XUL components within the border in top and on the left.
Inherited from box, indicates the percentage of occupation and the fact that the box adapts to the size of the window.
Also inherited defines a vertical or horizontal orientation contents. By default it is vertical.
We will see how to organize the contents of a groupbox which presents
a minimal set of components of interface for searching.
Structure of the interface:
<groupbox> <caption label="Search" style="background-color:white;" /> <vbox> <hbox> ..label and input field... </hbox> <hbox> ...button... </hbox> </vbox> </groupbox>
The caption is the first subelement of groupbox. An attribute of CSS
style was added because the background color seems to be gray by default.
Then a vbox is used to vertically place the text field and its label, at top.
These two elements are placed on the same line with hbox.
The button is also placed into a hbox to limit the size.
- Demo code.zip.