How do I eliminate the spaces between form fields

  • Profile Image
    rlzolinas
    Asked on July 18, 2017 at 05: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.

    https://form.jotformpro.com/71985794893986

  • Profile Image
    Jim_R
    Answered on July 18, 2017 at 05: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.

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

    - FORM WIDTH: 600

    - LABEL ALIGNMENT: Top

    - FONT: Arial

    - FONT SIZE: 12

    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 

  • Profile Image
    rlzolinas
    Answered on July 18, 2017 at 06: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!

  • Profile Image
    Jim_R
    Answered on July 18, 2017 at 06: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?

    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.

  • Profile Image
    Jim_R
    Answered on July 18, 2017 at 07: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:

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