How do I eliminate the spaces between form fields

  • duqadmin
    Asked on July 18, 2017 at 5:23 PM

    Building off of my original question, how do I eliminate the space between items, but keep the item text long as it is. The formatting seems to be a problem. I can't figure out where I went wrong with the css.

  • Support_Management Jotform Support
    Replied on July 18, 2017 at 5:44 PM

    If you're referring to the spaces between each form fields, you may adjust them in different ways. All of which are presented in a step by step manner on the guide I'm linking below.

    Complete guide: How-Can-I-Change-Spacing-Between-Questions

    While checking your form though, I noticed that there's no specific theme applied to your form. I can only assume this form (71985794893986) was cloned from another form and you just started working on it.

    Can you check my form https://www.jotform.com/71987009490970 and see if that kind of look and feel works for you?

    If it does, here are all the things I did to fix it:

    1. I removed all the CSS Codes.

    IMPORTANT NOTE: Before proceeding to Step #2 below, keep in mind that you won't be able to go back to the previous theme (whichever theme was it) that you were using before if you don't know the name of that theme. If you know the name of the theme you used, you can apply that previous theme if needed or just use our Form Revision History tool to revert your changes.

    2. I applied the Default Theme to reset the styling.

    How do I eliminate the spaces between form fields Image 1 Screenshot 30

    3. I went to the STYLES tab and changed the following:

    - FORM WIDTH: 600

    - LABEL ALIGNMENT: Top

    - FONT: Arial

    - FONT SIZE: 12

    How do I eliminate the spaces between form fields Image 2 Screenshot 41

    Result: https://www.jotform.com/71987009490970

    Alternatively, you can just clone my form and start working from there.

    Related guide: How-to-Clone-an-Existing-Form-from-a-URL 

  • duqadmin
    Replied on July 18, 2017 at 6:10 PM

    Hi, I already have a theme applied. DU Embedded. It's a theme that we use for all of our forms. Can you let me know what I need to do in the css to format this appropriately previous fixes do not seem to be working for this.

    Thanks!

  • Support_Management Jotform Support
    Replied on July 18, 2017 at 6:48 PM

    I see - Looks like you're using your own custom theme. Just to clarify though, you mentioned "how do I eliminate the space between items, but keep the item text long as it is" so:

    1. Are you hoping to adjust the individual spaces in between fields?

    2. Or you're just referring to the items on these checkboxes?

    How do I eliminate the spaces between form fields Image 1 Screenshot 20

    If your issue is #1, kindly refer to the guides I sent on my first reply. If it's #2, I'm currently working on it and will get back to you on this same thread once I have some results.

  • Support_Management Jotform Support
    Replied on July 18, 2017 at 7:03 PM

    All right, can you try the following (for issue #2):

    1. Remove all the CSS codes you injected to your Form Builder (make a copy of it by saving it somewhere, just in case you'd need it).

    2. Add the following CSS codes:

    .form-single-column {

      width: 100%;

    }

    .form-single-column .form-checkbox-item, .form-single-column .form-radio-item {

      min-width: 100%;

    }

    Result:

    How do I eliminate the spaces between form fields Image 1 Screenshot 20

    Related guide: How-to-Inject-Custom-CSS-Codes