Increase Spacing Of Multiple Choice

  • Profile Image
    koypo
    Asked on April 04, 2017 at 08:01 AM

    Hi,

    How do I increase the spacing between the options on multiple choice? 

    I would also like to increase the space between the question and the first option.

     

    Thanks 

     

    George

  • Profile Image
    Sven
    Answered on April 04, 2017 at 10:12 AM

    You can use our Form Designer Tool, to control the spacing and positioning of your fields. 

    Or you can add your own custom CSS if you want, for more information on how to inject custom CSS, please follow this link:

    How to Inject Custom CSS Codes

     

     

    Thank you.

  • Profile Image
    koypo
    Answered on April 04, 2017 at 11:08 AM

    Hi Sven,

    Thanks for the response.

    I have managed to use the form designer for the spacing between drop downs and text fields but it doesnt seem to have the capability to change the spacing between multiple choice options.

    Do you have any CSS that would take care of the multiple choice options?

    The form is placed here: http://ub.the-debt-advice-people.co.uk/ft/

     

    Thanks 

     

    George

     

     

  • Profile Image
    BDAVID
    Answered on April 04, 2017 at 01:15 PM

    Please try injecting the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-checkbox-item{

        padding-bottom: 20px !important;

    }

    Result:

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    koypo
    Answered on April 05, 2017 at 06:58 AM

    Great, got it, thanks, 

    So I am still struggling to increase the space between the question and the first select option.

    Is there some CSS that covers this? 

     

    Thanks 

  • Profile Image
    seth
    Answered on April 05, 2017 at 09:22 AM

    Hello,

    You can increase the spacing between the label of the question and the options by two strategies.

    1) Increase all the labels spacing from options:

    .form-label.form-label-left {

        padding-bottom: 25px;

    }

    2) Just the multiple choice:

    #label_15 {

        padding-bottom:25px;

    }

     

    You can also increase the spacing between options in the Advanced Designer. You should first click on the field. Special option will appear on the right.

     

    Here is what should your form would like:

     

     

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

     

  • Profile Image
    koypo
    Answered on April 05, 2017 at 11:30 AM

    Amazing, thank you.

    One final one on this. How do I increase the font size of the question in the multiple choice? 

    Thanks 

  • Profile Image
    Welvin
    Answered on April 05, 2017 at 01:33 PM

    You need to inject the following custom CSS codes:

    label#label_15 {

        font-size: 22px;

    }

    Change the 22 to your preffered size.