Tips, Best Practices for Assessment From Layout using CALM

A typical top level container

Each form page laid out  in CALM, should have a topmost CALM container with at least two rows.  The mandatory
footer section is in the last row of this topmost container and usually has 10% or less row percentage. Within the footer
row, put a single row container with  3 columns of column percentages 90%, 5% and 5%, respectively. The Previous,
Next or Submit buttons go into columns 2 and 3. If you are laying out the first page (mostly the cover page) you need
to put a Next or Submit (in case this form page is the only page for the assessment) button in the 3rd column. For other
form pages excluding the final page, you need to put a Previous button in 2nd column and a Next button in 3rd column
of the footer section container. The last page of a multipage assessment (including the cover page) needs to have a Previous
button in 2nd column and a Submit button in 3rd column.




Laying out a body section consisting of rows with exact column spacing

If you have sections of a paper form that have a symmetric grid layout (each row of form elements have exact number of columns
with exact spacing), use a single CALM container to lay them out.

Laying out a body section with rows of different column spacing

Since the HTML table column widths and heights are just suggestion to a browser and every browser implements its internal
HTML table layout differently.  In  case  you have a container layout with  different column spacings in different rows, you
should not lay it out using a single container. You should use nested containers. Rows of form elements with exact column
spacing should be laid out in a single container. Always use the Preview tab to check how the form page will look like in a
browser. The preview tab panel is not WYSIWYG, however the final layout in the HID web app will look very similar to
what is shown in the Preview tab panel.

Let assume, you want to layout a section of the form page body like the one shown below.




Step 1 - The outer container for this layout will have 2 rows and a single column.




Step 2 - Then add the second level of containers (in blue)  with equally spaced columns.



Step 3 - The third level containers (in red) have also equally spaced columns. At this step your layout is complete.



Best Practices/Tips