How to align radio buttons in one line?

  • Profile Image
    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 ;-)

  • Profile Image
    jonathan
    Answered on August 27, 2014 at 05: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.

     

    Contact us again anytime should you need assistance.

    Thanks!

  • Profile Image
    danischenker
    Answered on August 27, 2014 at 07: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!

  • Profile Image
    ashwin_d
    Answered 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:

    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!

  • Profile Image
    danischenker
    Answered on August 27, 2014 at 12:53 PM

    This is it! Thanks Ashwin!

  • Profile Image
    david
    Answered on August 27, 2014 at 03: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!

  • Profile Image
    rjviggia
    Answered on January 12, 2015 at 03: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

  • Profile Image
    ashwin_d
    Answered on January 12, 2015 at 03: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!