Remove spacing between groups of fields

  • lritter
    Asked on October 25, 2018 at 3:14 PM

    How do I get rid of the extra space between sections as indicated by the purple arrows below?

    1540494811screen shot Screenshot 10

  • AshtonP
    Replied on October 25, 2018 at 4:43 PM

    The extra spacing has been caused due to the existing CSS code on your form. Especially some fields are placed at a specific position and reducing the space causing a problem.

    Please allow me sometime so I can change the CSS code accordingly. 

  • lritter
    Replied on October 25, 2018 at 4:45 PM

    Yep, I figured it had something to do with that. I'm just not sure how to fix it. Thanks for looking into this.

  • AshtonP
    Replied on October 26, 2018 at 9:00 AM

    Because you moved fields in the Section Company Site information you will need to reposition all the fields accordingly using the same positioning method. there is no easy solution to that. 

    The Empty space that you see before header element BUILDING INFORMATION is not actually an empty space but it's the natural length of the section above. 

    Hence, in order to fix the space issue on your form, I had to move all the other elements in the upward direction.  

    Before you add a new CSS code you need to remove the line of code from your Existing CSS code 

    70900 Selection 941 Screenshot 10

    That code block becomes - 

    #id_71 {

        float: right;

        /* top: 20px; */

        right: 115px;

    }

    Now inject following CSS code at the bottom of yoour CSS section - 

    li#id_71 {

        position: relative;

        bottom: 120px;

    }

    #id_110 {

        position: relative;

        float: right;

        bottom: 135px;

    }

    li#cid_592, li#id_103, li#id_581, li#id_111, li#cid_536, li#id_60, li#id_62, li#id_590, li#cid_579, li#id_528, div#cid_576 {

        position: relative;

        bottom: 200px;

    }

    li#id_582 {

        position: relative;

        bottom: 200px;

    }


    ul.form-section.page-section {

        height: 2575px;

    }

    Here is my Demo form you may want to clonehttps://form.jotform.com/82983188954981 

    I hope this helps. 

  • lritter
    Replied on October 29, 2018 at 2:00 PM

    When I cloned your form, it doesn't look right. 

    1540836021screen shot2 Screenshot 10

  • AshtonP
    Replied on October 29, 2018 at 2:24 PM

    With CSS positioning, it's always going to be an issue. Because the Custom CSS code that you have used earlier assigns a static position to the fields, from the top or from the bottom. 

    It will be a huge issue when you add new fields to or remove fields from the form. The position will need to be adjusted every time. Also, you have a large number of fields on your form hence it's not recommended using manual positioning. 

    Instead, you could try field Shrink option to it's maximum and see if that works. Here is the guide the explains this - https://www.jotform.com/help/90-Form-Field-Positioning 

    If you remove the manual positioning then all fields on your form are going to appear with natural spacing. We can also help you remove the top/bottom margin & padding if required. 

    I hope this helps.