How to align radio buttons in one line?

  • danischenker
    Asked on August 26, 2014 at 11:58 PM

    Hi there,

    I am trying to create a form like on the page below.

    I somehow need to get all radio button on one line... Can you direct me to a solution? :)

     

    By the way: I was a bit confused with the support form.
    I was under the impression that I was searching a faq database.
    But when I hit "enter" I directly created the forum post...
    Sorry about that ;-)

  • jonathan
    Replied on August 27, 2014 at 5:32 AM

    Hi,

    Welcome to the JotForm support forum. =)

    The Radio button option field has a "Spread column" property. You can use that property to align the options into column formation.

    I actually can see in your test form  http://www.jotform.co/form/42376679367875 that you had discovered this already.

    How to align radio buttons in one line? Image 1 Screenshot 20

     

    Contact us again anytime should you need assistance.

    Thanks!

  • danischenker
    Replied on August 27, 2014 at 7:18 AM

    Hi Jonathan,

    Thanks, I did find this option, right. But it did not solve my problem.
    I set it to "9 colomns" but just like in your screenshot it would only create 4 columns.

    Somehow this seems to be the maximum. But I don't get why... Since I only use the numbers there should be enough space to have all the radio buttons on 1 line... not?

    Cheers!

  • Ashwin JotForm Support
    Replied on August 27, 2014 at 10:23 AM

    Hello danischenker,

    Please be noted that radio button options takes it own width. If you want to show more columns, you will have to increase the width of your form. Please check the screenshot below:

    How to align radio buttons in one line? Image 1 Screenshot 20

    If you do not want to change the width of you form, another option is to add custom css code in your form to reduce the width of the radio button options. Please inject the following custom css code in your form and that should solve your problem:

    .form-radio-item {

    width: 50px !important;

    }

    The following guide should help you in injecting custom css code:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • danischenker
    Replied on August 27, 2014 at 12:53 PM

    This is it! Thanks Ashwin!

  • David JotForm Support
    Replied on August 27, 2014 at 3:27 PM

    Hi,

    On behalf of my colleagues you are very welcome.  Please let us know if there is anything else we can help you with and we will be happy to do so.

    Thank you for using JotForm!

  • rjviggia
    Replied on January 12, 2015 at 3:03 AM

    Hi, 

    Unfortunately, I've tried both of these solutions mentioned here. I can see my radio button options in multiple columns in the form builder. But when my form is displayed on my squarespace website, it reformats to one column. It is embedded in my website using the source code because the iframe added an vertical blank space of thousands of pixels that was irksomely difficult to regulate.

    Thanks all! Great tool, great forums :D

     

    R

  • Ashwin JotForm Support
    Replied on January 12, 2015 at 3:33 AM

    Hello rjviggia,

    I have moved your question to a new thread and you will be answered here:  http://www.jotform.com/answers/494304 

    Thank you!