Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A vertical form is built using a table. The table has class ui-f4 and ui-f4-v, the latter indicates that the form is a vertical form.

Each row is a single label/control pair (unless the format is manually altered).

In most cases the label is some kind of text, and the control contains something like an input, select or display text. To look correct it is of big importance that theĀ baselines of the labels and the texts inside the controls match up, like this:

Image Removed

As can be seen the baseline extends through the table cells, and properly aligns the texts from the label and the LookupInput component that is the control (the icons do not align; this is a bug).

To control the baseline we need to style both the label and the parts that can appear as a control. This is non trivial, so here follows an explanation of how it is done, with each row containing one cell for the label and one for the control. The details can be found here.