How to reduce the spacing between fields?

  • rsvpfree
    Asked on February 23, 2015 at 8:39 AM

    I have viewed the form you created, but cannot see how the 'vertical space' between the textbox and the line with the checkbox has been reduced. It is still much too big, and they look like 2 separate items, while what I wish is that the checkbox line be 'visually attached' to the line above it.

    I cloned your form and attempted to use Designer>CSS to reduce both padding and margin to 'zero', here is the URL is my altered version of your form:

    http://form.jotformeu.com/form/50531930242344

    but I see no reduction in margin and padding.

    Further help would be appreciated.

  • Welvin Support Team Lead
    Replied on February 23, 2015 at 8:40 AM

    Hi,

    You should use field positioning feature if you want to align fields side by side. 

    https://www.jotform.com/help/90-Form-Field-Positioning

    Note that the entire form width is important if you want to align multiple fields: https://www.jotform.com/help/35-The-Importance-of-Form-Widths.

    As for the vertical padding, I've fixed for you. You should go to Line Layout in the form designer:

    How to reduce the spacing between fields? Image 1 Screenshot 20

    Thank you and let us know if you need any further assistance about this matter.

     

    Regards

  • rsvpfree
    Replied on February 23, 2015 at 9:52 AM

    Hello Welvin.

    Can this control (Line Spacing in Line Layout) be applied to only field in a form on which there are many fields?

  • rsvpfree
    Replied on February 23, 2015 at 9:53 AM

    Correction:  "to only field" should be "to only one field"

  • Welvin Support Team Lead
    Replied on February 23, 2015 at 10:00 AM

    The option is applied to the overall form/fields. If you want to adjust the spacing of the individual fields, you will have to inject a custom CSS codes to your form. We can help you about it, just please let us know the form URL and the fields you want to adjust.

    Additionally, you can do that in the form designer. Click on "CSS" tab > double click the whole field section to add its ID in the area > then choose the padding/margin and add the value:

    How to reduce the spacing between fields? Image 1 Screenshot 20

    Thank you!

  • rsvpfree
    Replied on February 23, 2015 at 10:58 AM

    Welvin.  My original question on February 23, 2015 at 08:39 AM stated clearly "cannot see how the 'vertical space' between the textbox and the line with the checkbox has been reduced. It is still much too big, and they look like 2 separate items, while what I wish is that the checkbox line be 'visually attached' to the line above it." 

    So your suggestion to use "Line Spacing" in "Line Layout" did not answer my question.

    You now say: in the form designer. Click on "CSS" tab > double clickthe whole field section to add its ID in the area > then choose the padding/margin and add the value:

    I believe I did that, and set both paddings and margins to zero. But the result seems to me to be no different.

    Could you or someone else please please answer my original question.

  • Welvin Support Team Lead
    Replied on February 23, 2015 at 11:27 AM

    I'm sorry about that.  I think we are dealing two issues here so let me break it again.

    As for the vertical spacing, just please follow this guide to adjust it: http://www.jotform.com/help/156-How-to-Reduce-Vertical-Spacing-between-Fields. If this method isn't working, follow the instructions in the form designer - Line Spacing section. I have already made the adjustments to your form, kindly check: http://form.jotformeu.com/form/50531930242344

     

    As for the checkbox line, do you want it to be like this: http://www.jotformpro.com/form/50534902730954 ? Let me know so I can give you the instructions.

    I look forward to your reply.

    Regards