List of checkboxes side by side

Problem:
The user would like to display the checkboxes in a form in two columns.

Solution:
This can be achieved using custom CSS code:

.wpt-form-set-checkboxes-wpcf-fieldname {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    display: block;
}

This support ticket is created 3 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 3 replies, has 2 voices.

Assisted by: Jamal.

Author

Posts

March 27, 2021 at 2:19 pm #2002817

matthewL-7

With a field that has multiple check boxes is there a way to have the list appear in 2 columns side by side as opposed to just 1 very long list?

Thanks

March 27, 2021 at 4:23 pm #2002945

Jamal

Hello and thank you for contacting the Toolset support.

I am sure this is possible using some CSS styles. Check this StackOverflow thread for inspiration on the CSS code to use. https://stackoverflow.com/questions/20027595/grouping-checkboxes-css-in-multiple-column-layout

I hope this helps. Let me know if you have any questions.

March 28, 2021 at 11:19 am #2003515

matthewL-7

Wow this was super easy. I wasn't aware of column count. Thanks.

If anyone else looks at this, I achieved this by getting the class of the "ul" attribute and then using the following code:

.wpt-form-set-checkboxes-wpcf-fieldname {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
display: block;
}

Works perfectly. 🙂

March 28, 2021 at 11:20 am #2003517

matthewL-7

My issue is resolved now. Thank you!