Defining hbox tags in grids

An hbox tag is defined by using a : colon in an item tag delimited by square brackets:
[f1  ][f2   ] -- No hbox tag
[f1  |f2   ]  -- No hbox tag
[f1  :f2   ]  -- f1 and f2 in hbox tag
Next example creates an hbox containing the fields "a", "b" and "c". In the grid, the widgets for these fields won't be aligned with the widgets created for the "d", "e" and "f" fields, because it is the parent hbox that will align with the grid columns:
LAYOUT
GRID
{
[a:b:c   ]
[d|e|f   ]
}
END
END
ATTRIBUTES
EDIT a = FORMONLY.a;
EDIT b = FORMONLY.b;
EDIT c = FORMONLY.c;
EDIT d = FORMONLY.d;
EDIT e = FORMONLY.e;
EDIT f = FORMONLY.f;
END
Figure: Using an hbox tag

Grid view of using a HBox tag
Figure: Widget size computations

Widget size computations diagram
The three first widgets are then rendered independently, inside the hbox tag:
Figure: HBox rendering 1

HBox tag rendering 1 screenshot

Hbox tags are useful when the form contains large widgets in a small number of cells, that must not be dependent to other widgets regarding grid column alignment. For example, when using a CHECKBOX for field "d", the alignment in the grid would result to:

Figure: Widget size computations

Using an HBox tag diagram
Note: The hbox gets an implicit spacer on the right. For more details, see Spacer items in hbox tags.

Here is the visual result:

Figure: HBox rendering 2

HBox tag rendering 2 screenshot
The next example is now using a CHECKBOX for field "d", and hbox tags to group fields "a" and "b" as well as "d" and "e", and uses regular item tags to align the widgets of field "c" and "f" without an hbox tag:
LAYOUT
GRID
{
[a:b   ][c     ]
[d:e   ][f     ]
}
END
END
ATTRIBUTES
EDIT a = FORMONLY.a;
EDIT b = FORMONLY.b;
EDIT c = FORMONLY.c;
CHECKBOX d = FORMONLY.d, TEXT="Checkbox";
EDIT e = FORMONLY.e;
EDIT f = FORMONLY.f;
END

Rendering result fields "c" and "f" are now aligned:

Figure: HBox rendering 3

HBox tag rendering 3 screenshot