How do I reduce the vertical space between some of my text boxes?

  • MasonRoberts
    Asked on September 8, 2016 at 8:47 PM

    I would like to reduce the vertical space between some of my text boxes, not the entire form. I have one section that has large gaps between the Text Box heading and then the Text Box question underneath. I have found where the reduce the vertical space for form overall, but I only want to reduce the space for some select boxes. Can you help? Thank. 

    Jotform Thread 927804 Screenshot
  • Kiran Support Team Lead
    Replied on September 8, 2016 at 11:37 PM

    Could you let us know the fields that you want to reduce the vertical space so that we can provide you with the CSS code to apply on your JotForm?

    We will wait for your response. Thank you! 

  • MasonRoberts
    Replied on September 14, 2016 at 7:34 PM

    Thank you for getting back to me. I am looking to reduce the space between each heading and the boxes underneath. For example, Credit Card Repayment is sitting to high from the two boxes underneath of Limit and Amount per month. I would like to bring them together a bit more. The same for the heading Mortgage Repayment, Investment Mortgage Repayment, and Car Loan. I appreciate any help you may be able to offer. Thanks, Samantha. 

  • Mike_G JotForm Support
    Replied on September 14, 2016 at 10:10 PM

    I have checked your form and the image below shows what I see:

    How do I reduce the vertical space between some of my text boxes? Image 1 Screenshot 20

    To my understanding, you would like to reduce the spaces I pointed using red arrows, correct?

    To do that, you can add the CSS codes below to your form.

    li#id_223, li#id_226, li#id_229, li#id_232, li#id_235, li#id_236, li#id_222 {

        height: 45px !important;

    }

    The instructions on how you can add CSS codes to forms is found in this guide: How-to-Inject-Custom-CSS-Codes

    I hope this helps. If you need any further assistance, please feel free to contact us anytime. Thank you.

  • MasonRoberts
    Replied on September 18, 2016 at 9:19 PM

    Yes. This is perfect. Thank you very much. I have completed your instructions and it has worked perfectly.

    One other thing, when the form is completed, and an email version sent to us, these 7 headings under Monthly Fixed Expenses to not show/print out on our end. So when it is time for our office to review the data and work with it, there are no headings, just numbers that the the clients has entered to answer the question. I have attached a screen shot that shows how the headings in this section alone just stop. Can you help with this?How do I reduce the vertical space between some of my text boxes? Image 1 Screenshot 20
  • Chriistian Jotform Support
    Replied on September 18, 2016 at 10:51 PM

    I am glad to know that my colleague's code worked for your requirement. Your latest issue seems to be related to the email notification, which is a different feature from the one on this thread. As such I have decided to move your question to a new thread. We shall answer your concern on that thread, which you can view through this link: https://www.jotform.com/answers/935421.
    Regards.