Ilios 3 Forms

#Form structuring in Ilios 3

In order to accommodate forms without using html tables, but still ensure the proper alignment of labels and fields, Ilios 3 forms are created using Bourbon Neat column spans, and the spans are set up in containing divs based on how many form fields will reside in each row.

A form can have any number of fields, but is limited to having one 1 to 3 form fields per row. In order to enforce proper alignment, each form 'label' is contained in its own respective 'column-span' and is paired with it's form 'data' counter part, which also resides in its own respective column-span. Any given set of label/data 'column-span' pairs is contained in it is own 'Form Column' div container. Each 'form colum' is defined by a CSS class name representing the width the of the column in a percentage-column format as follows (eg, 'class="form-column-{numberic width-percentage without %}-[column-ordinal]"'):

3-column Form Rows

3-column rows should be used for rows the have small data (checkboxes and small text like dates or small numbers)

For form rows that will contain 3 form items (3 field/label pairs), use a 33%-based 3-column class:

<!-- the class of the container should be 'form-column-33-1' for '33% wide, first column'; the column's place in the order is denoted by by the column number (1) in the class, following the width percentage -->
<!-- for a 3 column row, the first/leftmost column -->
<label class="form-column form-column-33-1">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>
<!-- the middle/second column of a 3 column row -->
<label class="form-column form-column-33-2">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>
<!-- and, finally, the last/third column of a 3 column row -->
<label class="form-column form-column-33-3">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>

2-column Form Rows

2-column rows should be used for rows the have text data which does not require a lot of length (20-30 characters)

For form rows that will contain 2 form items (2 field/label pairs), use a 50%-based 2-column class:

<!-- the class of the container should be 'form-column-50-1' for '50% wide, first column'; the column's place in the order is denoted by by the column number (1) in the class, following the width percentage -->
<!-- for a 2 column row, the first/leftmost column -->
<label class="form-column form-column-50-1">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>
<!-- the final/second column of a 2 column row -->
<label class="form-column form-column-50-2">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>

1-column Form Rows

1-column rows should be used for fields that have a lengthy data-value requirement (long text fields/dropdown select lists, text areas, etc)

For form rows that will only contain one form item (1 field/label pair):

<!-- the class of the container should be 'form-column-100' for '100% wide'; there is only one column, so it is column order is implied and the column-order delimiter is not necessary in the class name --> 
<label class="form-column form-column-100">
   <div class="form-label">{{t field.label}}:</div>
   <div class="form-data form-data-text">{{input for data}}</div>
</label>