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

    Add vertical spacing between two radio buttons

    Asked by lasercorp on February 11, 2013 at 05:44 PM

    I have added the following code to the css but it does not create any verical space.

     

    #input_66_0{padding-bottom:20px;!important} #input_66_1{padding-top:20px;!important }

     

    Any ideas?

     

    thx

    Page URL:
    http://www.jotformpro.com/form/23547172649966

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 11, 2013 at 05:59 PM

    You can try to inject the following code to create some vertical space between the radio button items. It will work on every form Radio Button field.

    .form-radio-item {
    padding-bottom: 15px;
    padding-top: 15px;
    }

    Alternatively, use more accurat selector to change it for your first Radio Button only.

    #cid_66 .form-radio-item {
    padding-bottom: 15px;
    padding-top: 15px;
    }

    Thank you.

  • Profile Image

    Answered by lasercorp on February 11, 2013 at 06:38 PM

    Hi Mike,

     

    Thanks for the code but when I enter it into the css, Nothing happens.

     

    can you verify please.

     

    Thax,

  • Profile Image

    Answered by jeanettebmz on February 11, 2013 at 07:18 PM

    Please just apply the settings to the upper classs .form-radio-item {

    .form-radio-item {
    padding-bottom: 15px;
    padding-top: 15px;
    }

  • Profile Image

    Answered by lasercorp on February 12, 2013 at 01:02 PM

    if I apply it to the upper class then all the radio buttons are affected. I onlt wish cid66 to have increased space.

     

    ps.

    changing the upper class worked on all radio buttons so why would #cid_66_0.form-radio-item not work?

  • Profile Image
    JotForm Support

    Answered by abajan on February 12, 2013 at 01:12 PM

    Hi,

    I've noticed that the code you gave in your opening post has the semicolon before the !important insted of after it like below. I haven't tested your form yet but just thought I should point out that error:

    #input_66_0{padding-bottom:20px;!important}

    should be

    #input_66_0{padding-bottom:20px !important;}

    likewise

    #input_66_1{padding-top:20px;!important}

    should be

    #input_66_1{padding-top:20px !important;}

  • Profile Image
    JotForm Support

    Answered by abajan on February 12, 2013 at 01:58 PM

    @lasercop

    For some reason, the issue is proving rather difficult to resolve but I'm sure one of us will figure it out eventually. Incidentally, for what it's worth

    #cid_66_0.form-radio-item

    is not the same selector as

    #cid_66_0 .form-radio-item

    The presence or absence of the space is quite significant:

    The first selector would apply to an element having both an ID of cid_66_0 and a class of form-radio-item

    The second selector targets all elements which have the class form-radio-item that are descendants of the element whose ID is cid_66_0

  • Profile Image

    Answered by lasercorp on February 12, 2013 at 03:08 PM

    Abajan,

     

    Thanks for the information,

     

    The code that works is

     

    #cid_66 .form-radio-item { padding-bottom:15px!important; padding-top:5px!important; }

    So the space between 66 & .form is important but still could not reference the individual buttons ie _0 & _1

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 12, 2013 at 04:27 PM

    You are right, ID based selector will not work in this case. It will select the radio button only (without text).

    If you really need to change one option only, we can write some CSS for you.

  • Profile Image
    JotForm Support

    Answered by abajan on February 12, 2013 at 04:44 PM

    @lasercop

    Nicely done! I had tried a similar rule but it didn't work: It spaced the radio buttons correctly but the labels got messed up. I may have left out the !important keyword or something.

    They're a few other CSS tweaks that would benefit the appearance of the form as a whole. For instance, the "Back" button on the last page should be on the same line as the submit button.

    I'll be back shortly.

  • Profile Image
    JotForm Support

    Answered by abajan on February 13, 2013 at 06:30 AM

    @lasercorp

    Here's a clone of your form with the changes previously mentioned, plus others. For example, the background color of the field error message has been darkened quite a bit, so as not to contrast so strikingly against the form's dark gray background.

    The injected CSS used can be viewed the page's source if you wish to implement the changes in your own form.

    Should you require further assistance with the form, we'd be happy to help.

    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on February 13, 2013 at 06:35 AM

    @lasercorp

    LOL, I only just realized that I've been calling you lasercop instead of lasercorp!