Skip to main content
Kinetic Community

Checkbox in Columns

This Service Item uses css to put Checkbox Elements into multiple columns.

Description

If you have a situation where you have several values in your Checkbox list, the Checkboxes can start to start to look a little ugly.  For example you have a Checkbox list which contains all 32 NHL Teams.  

By default the list will display vertically as shown below

NHLteam.png

In this situation the Checkbox Question will consume a lot of real estate on your form.  So what else can we do to make our large Checkbox Question more appealing to our end users?

The answer is that we can use css to put the Checkbox Values into multiple Columns:

To accomplish this I have built a form in Request-CE form builder.  This form contains two Checkbox questions.  The first is called NHL Teams and has each of the 32 teams.  The second question is called NFL and has each of the 4 teams in the NFC North division.  The NFL Question was added in order to show you how this function will handle Questions with less Checkbox values.

Add this code to the custom head content of your form.  The custom head content section can be found under the advanced section of the form settings in the form builder.

<script type='text/javascript'>
$(document).ready(function(){
$('.checkbox').addClass('clearfix')
});
</script>

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

A quick explanation of the code.  In the script tags we are targeting the .checkbox class to add the clearfix class to the element, this will stop other elements from being "floated" next to our checkbox field.  The first css selector is used to skip (:not) the checkbox field label and to give all of the other elements the float: left style, this is how we get the element to display horizontally.  There is also some ellipis and nowrap style code to control the checkbox label from taking up more than one line.  Finally we use media queries and the width style to create the number of columns that will be displayed on different window sizes.  To get different numbers of columns take 100 and divide it by the number of columns you want, then use that value as the % width.

By using this code the Questions will display as shown below:

columns2.png

jQuery is used in this example.  jQuery should come with a standard Request-CE deployment.  

In the example above all of the checkbox fields on the form will become columnized.  We will continue with that same example with the NHL teams and NFL, but this time we will target only the NHL teams to be columnized and leave the NFL as a vertical column.

The first step is to add a class to the checkbox field that you want to columnize.  This is done under the render attributes section in the form builder.  I am going to add a class of NHL to the NHL teams checkbox field.  Then the code in the custom head content needs to be edited to target the new class only.

<script type='text/javascript'>
  $(document).ready(function(){
    $('.NHL').addClass('clearfix')
});
</script>
<style>
  .NHL > label:not(.field-label){
    float: left;
    overflow: hidden;
    text-overflow: ellipis;
    white-space: nowrap;
  }
  @media (max-width: 768px){
    .NHL > label:not(.field-label){
      width: 100%;
    }
  }
  @media (min-width: 768px){
    .checkbox > label:not(.field-label){
      width: 50%;
    }
  }
  @media (min-width: 992px){
    .NHL > label:not(.field-label){
      width: 33%
    }
  }
  @media (min-width: 1200px){
    .NHL > label:not(.field-label){
      width: 20%;
    }
  }
</style>

Note that where ever .checkbox was in the previous example has been changed to .NHL.  

These changes will result in this display:

mixDisplay.png

Dependencies

  • jQuery