The field grid component, whose option icon is shown in figure 1, creates a grid of text fields in a form.

Figure 1. the field grid option icon

Field grids can be used to add structure to complex forms and make them more compact, as shown in the example in figure 2.

Figure 2. an example field grid

Editing a field grid

Click on the field grid to open the field grid window, as shown in figure 3.

Figure 3. the field grid window, field grid tab

The field grid window has two tabs. The Field grid tab lets you change the following settings:

Row label width

The width of the column containing the row labels. Note that if the width is insufficient to contain the labels, or leaves too little space for the fields, then browsers may adjust the width to create space.

Row labels

The labels for the rows. Enter each label on its own line.

Column labels

The labels for the columns. Enter each label on its own line.

The Breakpoints tab, shown in figure 4, lets you control the appearance of the field grid on narrow screens, where the field grid may have too many columns to fit.

Figure 4. the field grid window, breakpoints tab

The checkboxes let you choose breakpoints at which the field grid will split into a separate table for each row of data.

Click OK to apply the changes to the field grid. Click Cancel to return to the page without changing the field grid.