The forms created with the “Calculated Fields Form” plugin can be displayed with table structure in two different ways:
- Assigning the special classes names: column2, column3, or column4, to two, three or four consecutive fields in the form to display them side by side.
Tip: The classes names are assigned to a field through the attribute: “Add Css Layout Keywords”
- Using container fields (DIV, or FIELDSET). To display a group of fields with a table format, it is possible to insert a container field, and select the number of columns through its attribute: “Columns”. All fields inserted in the container will be displayed with a table structure, distributed in the number of columns selected in the container.
After a general description, I’ll proceed to explain the problematic of this article.
Suppose the form includes multiple fields, between them the fields: fieldname1, fieldname2, and fieldname3, have assigned the class name: column3, to display a row with three columns, and the fields: fieldname4 and fieldname5, have assigned the class name: column2, to display another row with two columns.
With the fields distribution described above, if fieldname3 is a dependent field, and is not active, the form will have two fields with class name: column3, and then the fieldname4 field but this time with the class name: column2.
The first principle has been violated …assign the class name: column3, to three consecutive fields…, the form will have two fields with the “column3” class, and consecutively, another field, but with the “column2” class. So, the fieldname4 field will be moved to the previous row (and something similar occurs with the rest of rows). The initial structure of the form will be broken, and the form’s behavior will be confusing for the majority of users.
What to do in this case?
There are two options to manage this situation:
First option: Create each row with a container field. The fields: fieldname1, fieldname2, and fieldname3, should be inserted into a DIV field, with the option: “3 columns” selected for the “Columns” attribute, and the fields: fieldname4, and fieldname5 in a second DIV field, but with the option: “2 columns” selected for the “Columns” attribute. So, if the fieldname3 field is dependent, and it is not active, the structure of the form will be preserved because the changes are limited to the scope of the container field.
Second option: Insert after each row, a “HTML Container” field, with the special class name: clear. The “clear” class assigns the style rule: clear:both; to the field with the class assigned. So, if fieldname3 is a dependent field, and it is not active, the fieldname4 field won’t be moved to the previous row, that preserves the initial structure of the form.