Remove extra spacing

  • Profile Image
    tracyalexander
    Asked on April 24, 2017 at 01:10 AM

    I would like to reduce the spacing above and below the fields shown.

    If it is possible I would like to reduce the spacing above and below every configurable list I have in my form without going into each one and changing settings?

    If not please just tell me how to do the fields I have included in the screen shot

    Thank you for your help

  • Profile Image
    Charlie
    Answered on April 24, 2017 at 02:54 AM

    If you want to change the overall spacing of the fields, then you can do that using the Form Designer Tool. Here's a guide that might help: https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions

    Below is a quick tutorial about it.

    1. First click the "Form Designer" button.

    2. Under the "Styles" tab, you should be able to see the "Question Spacing" option. 

     

     

    If you only want to change the padding or vertical spacing of the text field in your "Fleece" section collapse, then you can use this custom CSS code:

    /*Change padding of text under Fleece */

    #id_198 {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    }

     

    Now for the widgets, there's no general class selector that we can use to change all of the Configurable List widget's vertical spacing, so you need to select them all. Here's how: 

    1. First, select the widget you want to adjust the spacing. Then click the "Properties" icon. 

     

    2. Now navigate to the "Advanced" tab.

     

    3. Click "Field Details" if you see one and find the "Field IDs" section. Copy it. In my example, it's #input_239. 

     

    4, Collect all the field IDs of the Configurable List widget you want to change the spacing. Change the word "input" to "id" instead. Below is an example, which refers to the first 3 Configurable list widgets that you have:

    #input_239, #input_240, #input_241

    and change them to:

    #id_239, #id_240, #id_241

     

    5. Now create a custom CSS code using those IDs, which should look like this:

    #id_239, #id_240, #id_241 {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    }

    Make sure to separate each id with a comma (,). 

     

    To inject your custom CSS code in your form, you can do that by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Let us know if that works.