Checkbox Formatting

[safetyinmind]

I have a multi-select option. I’m not too keen on the multi-select field that appears in the form.

The control+click method of selecting multiple options is still unfamiliar to some users and the small scroll box presented makes a long list of options cumbersome to navigate.

I switched to checkboxes, however these are displaying “inline”, across the column width:

Is there a way to format these to stack individually and vertically with left-align? Did I miss something in the design options?

This feels like it might be a CSS question, but I have not yet dipped my toes into those waters. I see “tb-checkbox-inline” when I inspect, but haven’t a clue how, where or what change to make.

[tim.young]

Hi @safetyinmind

This might be useful

Show Radio or Checkbox Options in Multiple Columns on Forms

If you have many options in your checkbox or radio fields that you’d like to list vertically, the field may end up taking lots of vertical space. Splitting your field options up into multiple columns will help create a more ideal viewing experience in these cases. [Snag_4d0e575] To apply columns to all checkbox and radio fields in your form, add the below CSS code to your page. The samples shown below both create 3 columns so do change that number as needed. .tb-checkbox-outline{ columns: 3;…

I’ve done some other css for checkboxes, I’ll look for it if this doesn’t help.

[safetyinmind]

Thanks @tim.young,

This didn’t change anything for me - I suspect it may have something to do with the “inline” format aspect, rather than the columns. My list appears in one column - which is what I want - but still spread across the column end-to-end. Breaking it into more columns may not be the fix for this?

Neil Campbell