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 can I reduce space between radio button columns?

    Asked by E6 on July 21, 2011 at 12:27 PM

    I am trying to get 3 options for radio buttons to fit on one line.

    One of the options is specified using the 'other' setting.

    I chose 3 columns, but it is putting a lot of space between my first two items and placing 'other' on a 2nd line.

    There actually appears to be enough room to fit 'other' on the first line, but it won't do it.

    And I'd like to close up the space between the radio buttons anyway.

    Is there custom css to do this?

    Screenshot
    radio buttons other option
  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 21, 2011 at 02:26 PM

    Hi,

    That is how the 'Other' option was designed. It cannot sit beside another option. It will always be on its own line. Sadly, no amount of css injection that can change how the 'Other' option behaves. I've tried of ways to override the css that's responsible for this but to no avail.

    Perhaps someone else from our team can find a solution for you.


    Neil

  • Profile Image

    Answered by E6 on July 21, 2011 at 05:39 PM

    Bummer. I tried various css things too but was hoping I just wasn't trying the right things.

    I'll rework my form for it to be single column so it won't look so goofy.

    Would be nice to have control of the 'other', but gotta say jotform is really cool and I'm impressed with all the controls so far otherwise.

    Thanks very much for the fast response.

  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2011 at 09:05 PM

    Hi E6

    With due respect to my colleague Neil, there is indeed an injected CSS solution to this. It is a closely guarded secret that is cloaked in much intrigue! LOL :)

    Seriously, I'll post the solution shortly. Hang in there.


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2011 at 10:09 PM

    Okay, here's the solution:

    1. Load the form into the form builder, click the Scan to be used for: field and expand it:


    2. Click Spread Columns and select 2:

    3. Add the following CSS to what you have already injected:

    #id_16 {
    padding-left:15px;
    }
    .form-radio-item {
    width:100px !important;
    }
    #cid_16 {
    position:relative;
    }
    #other_16 {
    position:absolute;
    top:8px;
    right:388px;
    }
    #input_16 {
    position:absolute;
    top:0;
    right:253px;
    }

    That should do the trick! :)

    Incidentally, it doesn't matter how many columns you select in the Spread Columns, so long as they are more than 1.

    If you need help with anything else related to your forms, please let us know. The Support Team likes to help our users get the most out of their forms.

    Cheers.


    ~ Wayne

  • Profile Image

    Answered by E6 on July 22, 2011 at 10:52 AM

    Nice, Wayne. That's very cool.

    I reworked my form yesterday in such a way that I was ok with not being able to do it, but this could be better and is great to know.

    I cloned my form so I could experiment with your solution (it's the form named Clone of... if you look at it.)

    I did change #input_16 to be right 280px b/c the other text field box is kinda far away from the radio button with it at 253px (at least on my tests so far).

    I still have a couple of problems though:

    1. I've got a radio button used in another part of the form. So now the 100px width which is great for this element makes the other radio buttons wrap. I thought I could maybe hone in on just the radio buttons in question by adding #id_16 before form-radio-item, but when I do that the 2nd radio button moves over and winds up partially behind the other button.

    2. Since this is now expanded, it has to be on a line by itself and I was trying to get it to be to the right of the service level question.

    Thanks again for the help with wrangling the other button onto the same line. Should it wind up not being workable for this form, I'm sure it will come in handy on another one!

  • Profile Image
    JotForm Support

    Answered by abajan on July 22, 2011 at 06:50 PM

    Hi again E6

    Oops! Sorry about that bit of sloppiness. The .form-radio-item selector lacked specificity. Simply preceding it with #id_16 and a space will stop the rule from affecting other radio button fields within the form. Therefore, your injectred CSS in its entirety should be:

    .form-all {
    border: 2px solid #E89200;
    }
    .form-header-group {
    background:#E89200;
    padding:15px 5px;
    color:#FFF;
    }
    .form-label-top {
    padding-top:5px;
    }
    .form-label-left {
    padding-left:8px;
    padding-bottom:10px;
    }
    .form-line-column {
    padding:0px 15px;
    }
    .form-html {
    padding:1px 0;
    margin:8px 3px;
    background:#ccc;
    }
    .form-submit-button {
    background:#E89200;
    padding:10px 15px;
    margin:10px;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    }
    #id_16 {
    padding-left:15px;
    }
    #id_16 .form-radio-item {
    width:100px !important;
    }
    #cid_16 {
    position:relative;
    }
    #other_16 {
    position:absolute;
    top:8px;
    right:388px;
    }
    #input_16 {
    position:absolute;
    top:0;
    right:253px;
    }

    The thing is, preceding the selector with #id_16 is what you stated you did and it didn't work. I'll have to have a look at your form later to see why. In the meantime, you may clone my form and use it as your own, if you wish. Below is its URL:

    https://www.jotform.com/form/12013616336


    ~ Wayne

    P.S. I only just discovered that the distance of the "Other" text box from its radio button renders correctly only in Chrome (at least in Version 12). It's too wide in my other browsers: Safari 5, IE 8, Opera 11 and Firefox 5


    P.P.S.
    Okay, here's the fix for that:

    Change the right: 253px; declaration for the #other_16 rule to
    left: 216px;

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2011 at 12:16 PM

    Hello (yet again) E6! LOL :)

    Good thing I checked my post again because that last bit should have read: "Change the right: 253px; declaration for the #input_16 rule to left: 216px;" So, (finally!) here is the full re-worked injected CSS:

    .form-all {
    border: 2px solid #E89200;
    }
    .form-header-group {
    background:#E89200;
    padding:15px 5px;
    color:#FFF;
    }
    .form-label-top {
    padding-top:5px;
    }
    .form-label-left {
    padding-left:8px;
    padding-bottom:10px;
    }
    .form-line-column {
    padding:0px 15px;
    }
    .form-html {
    padding:1px 0;
    margin:8px 3px;
    background:#ccc;
    }
    .form-submit-button {
    background:#E89200;
    padding:10px 15px;
    margin:10px;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    }
    #id_16 {
    padding-left:15px;
    }
    /* specificity */
    #id_16 .form-radio-item {
    width:100px !important;
    }
    #cid_16 {
    position:relative;
    }
    #other_16 {
    position:absolute;
    top:8px;
    left:195px;
    }
    /* The difference between the left declaration's value
    above and that below should always be 14px */
    #input_16 {
    position:absolute;
    top:0;
    left:216px;
    }

    I have already changed the injected CSS in the form that I earlier suggested you may clone, to this CSS above.

    -----------------------------------------------------------------------------------------------------

    Concerning the clone you made for experimentation purposes, shrink the "Scan to be used for" field and replace the form's injected CSS with the following:

    .form-all {
    border: 2px solid #E89200;
    }
    .form-header-group {
    background:#E89200;
    padding:15px 5px;
    color:#FFF;
    }
    .form-label-top {
    padding-top:5px;
    }
    .form-label-left {
    padding-left:8px;
    padding-bottom:10px;
    }
    .form-line-column {
    padding:0px 15px;
    }
    .form-html {
    padding:1px 0;
    margin:8px 3px;
    background:#ccc;
    }
    .form-submit-button {
    background:#E89200;
    padding:10px 15px;
    margin:10px;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    }
    .form-description {
    width: 200px !important;
    left: 120px !important;
    }
    .form-description-content {
    color:#666;
    font-size: 12px;
    }
    #id_16 {
    padding-left:15px;
    }
    #id_16 .form-radio-item {
    width:100px !important;
    }
    #cid_16 {
    position:relative;
    }
    #other_16 {
    position:absolute;
    top:8px;
    left:200px;
    }
    #input_16 {
    position:absolute;
    top:0;
    left:214px;
    }

    With the "Scan to be used for" field shrunk and the above CSS injected, here's how that form should end up looking: http://www.jotform.com/form/12035204359

    Incidentally, the reason your CSS didn't work was because you omitted the small but very important dot (.) before the class name: #id_16 .form-radio-item

    Cheers


    ~ Wayne

  • Profile Image

    Answered by E6 on July 25, 2011 at 10:57 AM

    That's perfect, Wayne.

    Thanks for hanging in there with me and working it out so nicely.

    It was my own bit of sloppiness missing that pesky dot when I tried adding the specific #id info. ;-)

    And you know, when I first posted the question the form might not have had that other line of radio buttons for you to take into consideration. I discovered your cool conditions abilities at some point and reworked the form with the other radio buttons. I can't remember when I did that -- it might have been in the middle of our conversation.

    Gotta say this is my first use of JotForm and I'm really impressed with the interface, customization options, and esp. the friendly and fast assistance!

  • Profile Image
    JotForm Support

    Answered by abajan on July 25, 2011 at 01:53 PM

    Glad everything worked out, E6.

    Cheers :)


    ~ Wayne 

  • Profile Image

    Answered by BMGH on December 23, 2011 at 06:46 PM

    Hi Wayne,

    I want to reduce the spacing between radio-button options - right now it is 3 cm and it completely messes up the question and options - because of the BIG gap between options, all options are displayed underneath the questionlabel - instead of on the same line.

    As my options are single digits, they should easily fit on one line.... here's my form: http://www.jotform.com/?formID=73610618627

    I'm looking for a generic option for radio-button items - not one where I have to add CSS for each question/ID.


    Suggestion: to be able to add/edit the column-width - I can select the number of columns, but clearly the default width is too wide.

     

    Thanks!

  • Profile Image

    Answered by BMGH on December 23, 2011 at 07:53 PM

    SOLVED!

    In the downloaded CSS, I edited this line:

    .form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item{
        width:55px;
    }

    changing: width:150px;  into: width:55px;


    Not completely happy with the method as such, but it works!

     

  • Profile Image

    Answered by EnergyExpress on January 24, 2015 at 10:57 PM

    I realize this is an old post, but a very important one for all us moving from AdobeFormsCentral.  If you have a simple radio button - yes, no. This is quick CSS download for horizontal alignment works great. Thanks BMGH and JotForm Team

  • Profile Image
    JotForm Support

    Answered by jonathan on January 25, 2015 at 05:52 AM

    @ EnergyExpress

    Thank you for contacting us. 

    You can also post your inquiry anytime using this link http://www.jotform.com/contact/

    Let us know if there is more we can assist you with.