How can I reposition my radio buttons to get three columns of questions?

  • Profile Image
    DrFischer
    Asked on March 25, 2013 at 08:27 PM

    Hey guys,

    I injected some CSS code into my form to make my radiobuttoons look really cool, but now I'm stuck: I want to get three columns of questions, where each question has one label and three radiobuttons. Is there any solution out there for my dilemma, my wise friends? (Please see pic)

    R.

  • Profile Image
    EltonCris
    Answered on March 25, 2013 at 09:03 PM

    Hi,

    Add this on your CSS codes.

     

    .form-multiple-column .form-radio-item {

    width: auto !important;

    }

    Hope this helps. Thanks!

     

  • Profile Image
    DrFischer
    Answered on March 25, 2013 at 10:04 PM

    Thank you for the quick answer! tried it, but its not working. I removed all CSS injections and just put in your code. here is how it looks like now: http://form.jotform.us/form/30830544486153. Any suggestions?

  • Profile Image
    pinoytech
    Answered on March 26, 2013 at 01:54 AM

    Hi there,

    You might like to try to inject this codes in to your form.

    .form-multiple-column .form-radio-item {

    width: 67px !important;

    }

    Thank you!

  • Profile Image
    DrFischer
    Answered on March 26, 2013 at 02:01 AM

    thanks again, tried it, no change at all. (you can look at the source code at http://form.jotform.us/form/30830544486153). I tried it in firefox and chrome.

    How did you come up with 67px? Did you try it in one of your forms and it worked there?

    R.

  • Profile Image
    pinoytech
    Answered on March 26, 2013 at 02:30 AM

    Yes, it works on my end. Please take a look at this: http://www.jotformpro.com/form/30841583132954

    As I've check your form field (TINA, TUNA, SNICKER and DOODLE), I found out that the Label Alignment was set to Right which I change it to LEFT and injected the codes that I've provide on my post above.

    Feel free to contact us again if you need further assistance.

  • Profile Image
    EltonCris
    Answered on March 26, 2013 at 02:51 AM

    Hi,

    Let me just clarify that the first code I've provided works fine. There was just a little problem on your CSS when you copy and pasted it to your form. The first class .form-multiple-column is lacking with dot symbol ".". Note that classes starts with dot.

    Kindly review your CSS codes. It should be this:

    .form-multiple-column .form-radio-item {

    width: auto !important;

    }

    There should be dot on the first part of the code. Thanks!

  • Profile Image
    DrFischer
    Answered on March 26, 2013 at 03:18 AM

    Awesome, I got it! EltonCris, pinothech, both your answers were very helpful! Excellent support.

    THanks as lot!

    r.

  • Profile Image
    pinoytech
    Answered on March 26, 2013 at 03:47 AM

    It's our pleasure DrFischer. If you need our assistance again, feel free to email us or post your query here.

    Have a great day!