Breaking up long multiple choice option columns

API & Customization
1

I'm trying to find a javascript or CSS code that would allow for the checkbox options to be grouped into separate columns (instead of one long list) that would look appropriate on mobile too. Anyone have any ideas? It would be great to have two or three columns with 5 or 10 options in each column under the question. Has anyone successfully done something like this?

2

Hi John,

You can use CSS3 Columns to accomplish this.

First, you need to target the field which contains the checkboxes. Unfortunately, at the time of writing this, Knack doesn't set up ID's or Class names to specify the field in relation to your date.

Instead, identify that field using pseudo elements or classes. 


Once you've figured out the appropriate method of selecting your field element, target the 'value' class which follows and set the column count there. 

In my case, I used this rule to set the columns: 

.kn-search-filters ul li:last-of-type .value{
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
}

 
Most likely, you will need to play with the other styles surrounding your field(s)/input(s) to allow for the desired column count.

For me, I just needed to widen up the checkbox labels to fill out the columns.

.kn-search-filters label.option {
  width: 130px;
}

Hope this helps!!