Arranging Items in Columns or Grids

• Use af:panelFormLayout with labels above or below the text:

Notes:

Arranging Items in Columns or Grids

The af:panelFormLayout component enables you to lay out multiple form input components such as input fields and selection list fields in one or more columns. They can be arranged one of two ways:

With the field labels right-aligned and the fields left-aligned, as shown in the first example in the slide

With the labels above the fields, as shown in the second example. To place the labels above the fields, set the labelAlignment attribute on af:panelFormLayout to top.

When you nest an af:panelFormLayout component inside another, by default the label alignment in the nested layout is top.

The following attributes determine the number of rows and columns to display the children components:

rows: The number of rows after which a new column will start. The default is 2,147,483,647 (Integer.MAX_VALUE), which means all visible, rendered children components display in a single column. When rows is a nondefault value, the number of columns is dependent on the number of rendered children. For example, if rows is set to 6 and there are 7 to 12 rendered children, the list is displayed in two columns.

For more