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

  • Profile Image
    bhds
    Asked on December 20, 2017 at 04:30 PM

    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.

  • Profile Image
    Jim_R
    Answered on December 20, 2017 at 05:59 PM

    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.

  • Profile Image
    bhds
    Answered on December 21, 2017 at 09:34 AM

    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:

    1513866798Screen Shot 2017-12-21 at 9.24

    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.

  • Profile Image
    Ardian_L
    Answered on December 21, 2017 at 10:59 AM

    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.


  • Profile Image
    bhds
    Answered on December 21, 2017 at 11:10 AM

    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?

  • Profile Image
    Mike_G
    Answered on December 21, 2017 at 12:07 PM

    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.