Remove extra spacing

  • tracyalexander
    Asked on April 24, 2017 at 1: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

    Jotform Thread 1126719 Screenshot
  • Charlie
    Replied on April 24, 2017 at 2: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.

    Remove extra spacing Image 1 Screenshot 60

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

    Remove extra spacing Image 2 Screenshot 71

     

     

    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. 

    Remove extra spacing Image 3 Screenshot 82

     

    2. Now navigate to the "Advanced" tab.

    Remove extra spacing Image 4 Screenshot 93

     

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

    Remove extra spacing Image 5 Screenshot 104

     

    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.