How to make my radio button label in one line only

  • Profile Image
    mbas123
    Asked on May 11, 2015 at 03:35 AM

    Hi,

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

    thanks,

    Rey Galvez

  • Profile Image
    Boris
    Answered on May 11, 2015 at 08: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%;
    }

    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.