Square Radio Buttons Widget: Is there a way to spread the choices to columns

Is it possible to spread the choices in the Square Radio Buttons widget across multiple columns?  The standard 'Single Choice' form element has this functionality, but I didn't see it as an option in the Square Radio Buttons widget.

Thank you.

The Square Radio Buttons Widget doesn't have that feature I'm afraid. However, this can be achieved using CSS.

First, inject the following CSS Codes to the widget itself:

#iCheckList li {

    float: left;

    width: 120px;

}

Complete guide: How-to-Inject-CSS-Codes-to-Widgets 

This should make your widget look like this:

Notice that extra space generated after moving them into 2 columns? This can be addressed by the following CSS codes, only this time, you would inject these straight to your Form Builder (and not within the widget).

#id_25 {

    margin-bottom: -100px !important;

}

Complete guide: How-to-Inject-Custom-CSS-Codes 

Result:

To avoid confusion on where to place the codes, please refer to the respective guides I linked above.

Thank you for your reply.  Unfortunately, the CSS code doesn't seem to work.

When I enter the code you suggested for the widget itself, all of the radio buttons disappear, and I'm left with just the question:

When I then enter the suggested CSS code into the Form Builder, the entire widget disappears from view on the form!

Can you suggest alternative CSS code?

Thank you.

Please use this CSS Code instead, put the code on the Custom CSS of the widget.

ul#iCheckList li {

   display: inline-block !important;

   width:120px !important;

}

Let us know if you have any other question.

Thank you - that CSS code worked.

One more question:  Can I show the choices in 3 columns instead of the 2 columns that you code gives?

To do that, you can add the following CSS codes to your form.

ul#iCheckList {

    -moz-column-count: 3;

    -moz-column-gap: 1px;

    -webkit-column-count: 3;

    -webkit-column-gap: 1px;

    column-count: 3;

    column-gap: 1px;

}

You can increase the number of columns by increasing the value of the column-count property in the codes I provided.

If you have other questions, please feel free to contact us again anytime.