How to make my radio button label in one line only

  • mbas123
    Asked on May 11, 2015 at 3:35 AM

    Hi,

    How to make my radio button in one line only. See my screenshot.

    How to make my radio button label in one line only Image 1 Screenshot 20

    thanks,

    Rey Galvez

  • Boris
    Replied on May 11, 2015 at 8:44 AM

    Hello Ray.

    When set to be on the same line, the five options will each take 1/5 of the available horizontal space in the form. It means that if one of the option, "Sometimes fairly" in this case, is wider than 1/5 of the available space, it will break downwards so that it can all fit in the available horizontal space.

    Please add the following custom CSS to work around this issue, by making the 3rd option wider to 24%, and the 4th option shorter to 16%. It will be enough to work in your form.

    .form-multiple-column[data-columncount="5"] .form-radio-item:nth-of-type(5), .form-multiple-column[data-columncount="5"] .form-checkbox-item:nth-of-type(5) {
        width: 24%;
    }

    .form-multiple-column[data-columncount="5"] .form-radio-item:nth-of-type(7), .form-multiple-column[data-columncount="5"] .form-checkbox-item:nth-of-type(7) {
        width: 16%;
    }

    How to make my radio button label in one line only Image 1 Screenshot 20

    Please test it out, and let us know how it goes. Please don't hesitate to ask if you need further help, or if you have any questions about setting it up.