What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to make my radio button label in one line only

    Asked by mbas123 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

    label radio button label single line custom CSS
  • Profile Image
    JotForm Support

    Answered by Boris 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.