Adjust vertical spacing between radio button fields

  • SpiceVillage
    Asked on May 23, 2014 at 3:39 AM

    Hi

    I have various radio button input fields. Some fields have only a few options while others are pretty long. I need to have a way of arranging them nicely. Pls refer to attached screenshot to see what I need to get done.

     

    Thanks

     

    Jotform Thread 382123 Screenshot
  • Ashwin JotForm Support
    Replied on May 23, 2014 at 4:59 AM

    Hello SpiceVillage,

    Please take a look at the following cloned form and see if this looks okay to you:  http://form.jotformpro.com/form/41421878853967? Feel free to clone this form for a closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Alternatively, you can inject the following custom css in your form:

    #id_79{position: absolute;

    margin-top: 633px !important;}

    #id_19{margin-left: 362px !important;}

    The following guide should help you in injecting custom css code:  http://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!

  • SpiceVillage
    Replied on May 23, 2014 at 5:38 AM

    Thanks. Will try it out. My forms all have 2 columns. So I'll need some kind of code that I can apply to all my forms so that each radio or checkbox field has equal vertical spacing between each other. I don't want them aligned with the field next to it, because then, I'll always end up with unequal gaps above & below. It seems the problem is always with the left column. But I may be wrong.

  • SpiceVillage
    Replied on May 23, 2014 at 5:58 AM

    Pls take a look at this form: formID=41422438320444. I cannot possibly adjust the individual vertical spacings for every form. I've got dozens to do.

  • KadeJM
    Replied on May 23, 2014 at 9:26 AM

    This took a little bit of finagling to figure out. The key here is to use a CSS " !Important " property which overrides the initial CSS values to allow you to seat the field blocks where you need them.

     

    Your Updated Form: http://www.jotform.me/form/41423623230441 

    (go ahead and clone it back into your account if you want)

     

    Example CSS Code:

    #id_79{margin-top: -150px !important;
    }


  • SpiceVillage
    Replied on May 25, 2014 at 10:59 PM

    Hi KadeJM, sorry, but both your links aren't working. :(

  • Ashwin JotForm Support
    Replied on May 26, 2014 at 2:16 AM

    Hello SpiceVillage,

    It seems that the form was somehow deleted. I have now restored this form and cloned it in my account. Please take a look at the following cloned form:  http://form.jotformpro.com/form/41450801226949

    The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Thank you!