Add vertical spacing between two radio buttons

  • Profile Image
    lasercorp
    Asked 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

  • Profile Image
    Mike_T
    Answered 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
    lasercorp
    Answered 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
    jeanettebmz
    Answered 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
    lasercorp
    Answered 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
    abajan
    Answered 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
    abajan
    Answered 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
    lasercorp
    Answered 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
    Mike_T
    Answered 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
    abajan
    Answered 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
    abajan
    Answered 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
    abajan
    Answered on February 13, 2013 at 06:35 AM

    @lasercorp

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