How to display checkbox options vertically in a column

By default, checkboxes are displayed horizontally on the page. There may be instances where the checkboxes are best placed vertically on the page. A long list of items can look a bit disorganized as a horizontal listing.

One Column

Shorter lists can easily be placed in one column. To place the list into one column a CSS class needs to be created and then that class needs to be added to the checkbox field.

1. Create CSS Class
   The code below can be added to "Custom Head Content" found in the "Form Setting" of a Kinetic Request Form.

<style>
.vertical-checkbox label:not(.field-label) {
      clear: both;
    }
</style>

2. Apply Class to Checkbox Field
   Now the .vertical-checkbox class can be added to the checkbox question which will apply the new css style to make them vertical. A render attribute of 'class' can be created with a value of 'vertical-checkbox'.

Here is the resulting one column of checkboxes.

Multiple Columns

The one column shown above can take up more of the vertical space of a page then is necessary. In the case of longer lists, multiple columns can be used to display the checkboxes. This solution is responsive and will dynamically modify the number of columns from 1-3 to match the available width. When displayed on a small phone it may display only 1 column, on a tablet 2 columns may be displayed, and 3 will be displayed on a desktop.

1. CSS Class
   The code below can be added to "Custom Head Content" found in the "Form Setting" of a Kinetic Request Form.

<style>
.vertical-checkbox > label:not(.field-label){
  float: left;
  overflow: hidden;
  text-overflow: ellipis;
  white-space: nowrap;
}
@media (max-width: 768px){
  .vertical-checkbox > label:not(.field-label){
    width: 100%;
  }
}
@media (min-width: 768px){
  .vertical-checkbox > label:not(.field-label){
    width: 50%;
  }
}
@media (min-width: 992px){
  .vertical-checkbox > label:not(.field-label){
    width: 33%
  }
}
@media (min-width: 1200px){
  .vertical-checkbox > label:not(.field-label){
    width: 20%;
  }
}
</style>

2. Apply Class to Checkbox Field
   Now the .vertical-checkbox class can be added to the checkbox question which will apply the new CSS style to make them vertical. A render attribute of 'class' can be created with a value of 'vertical-checkbox'.

Best Practice

The solution above works great for an implementation with a few forms that have checkboxes in columns. However, the recommended practice is to add the CSS (such as in this example) to a style sheet in the bundle. Doing so allows all froms to use the CSS Class without adding it to the Custom Head Content in each form. All forms then would be able to use the checkbox columns by adding the class of 'vertical-checkbox' to the checkbox field.