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:
As can be seen the texts align on the baseline, and that is important. We can also see that the icons are incorrectly aligned - that is a bug that we'll fix later.
Aligning the stuff like this is decidedly non-trivial, so let's explain how it's done currently.
Addressing things inside the form
All parts of the form have separate classes. The td that contains a label has the classes:
- ui-f4-lbl: intended for things shared between horizontal and vertical forms
- ui-f4-lbl-v: specifies that the label is for a vertical form.
The td that contains a control (or a value) has the classes:
- ui-f4-ctl: shared between vertical and horizontal forms
- ui-f4-ctl-v: for vertical input specifically.
While the label is typically small the area for the control can vary greatly in size: from a simple input to a textarea. For all of these we want to align the baselines - if at all possible.
In the above picture we have two labels but two completely different parts in the control area:
- A value string span from the LookupInput (the 'no selection' text)
- An input type='text'
To have these share the baseline the following was done...
The baseline itself is mostly determined by the line-height property. So all data in both cells must share the same line-height. This line-height needs to be a bit bigger than normal to allow input to be rendered correctly.
Links
The following was used to help: