What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

    How to adjust the height of the TextArea autosize widget?

    Asked by 87Discount on June 08, 2017 at 03:11 PM

    Pretty much exactly what the title says. I tried playing around with the css but it seems to mess up the push down effect so what do you do?

  • Profile Image
    JotForm Support

    Answered by Kiran on June 08, 2017 at 04:49 PM

    Generally, the new lines will be added automatically in the widget when the text entered to the field. However, if you want to display multiple lines on the widget you may inject the following CSS code to the custom CSS section of the widget.

    textarea {

    height: 100px;


    You may change the px value in the code as per your requirement. Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image

    Answered by 87Discount on June 09, 2017 at 09:17 AM

    I realize now that I didn't really ask what I had intended to. The box itself is small enough but the element itself takes up a lot of space and I desire the elements that follow to be closer. So what I'm really after is shrinking the space around the element so that the following controls are closer to it.

  • Profile Image
    JotForm Support

    Answered by liyam on June 09, 2017 at 11:35 AM

    Hello 87Discount,

    I suppose you are referring to this form: https://form.jotformpro.com/71595078961974 

    If so, you can inject this CSS code into your form:

    #customFieldFrame_41, #customFieldFrame_42, #customFieldFrame_43, #customFieldFrame_44 {
        height: 30px !important;

    This will reduce the spacing between your widgets. 

    If you need to know how to inject CSS code into your form, please follow the steps from this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have other questions or concerns, please let us know.


  • Profile Image

    Answered by 87Discount on June 09, 2017 at 11:58 AM

    That succeeded in making the elements smaller but the problem now is that they don't expand as I enter things in, except for the bottom-most box.

  • Profile Image
    JotForm Support

    Answered by John_Benson on June 09, 2017 at 01:57 PM

    I tested the form (https://form.jotformpro.com/71595078961974) and I was not able to replicate the issue of Text area not expanding as shown in the screen animation below:

    Hope that answer your question. If not, please do get back to us. Thank you.


  • Profile Image

    Answered by 87Discount on June 09, 2017 at 02:48 PM

    Right that's not the issue. They expand when everything is set to the default settings. The issue is that the default settings are not what I'm after. The spacing of the questions in the animation is a bit too much. So Liyam sent a solution that moved the boxes closer together which was something similar to what I had tried before posting. The issue is that when the boxes are moved closer together by adjusting the height of the control The expanding textbox stops functioning normally and does not expand and pushdown the other elements. So what I'm looking for if its possible is to adjust the height while retaining the functionality. But not the height of the text box, rather the entire element. 

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2017 at 03:44 PM

    I see what you meant as well. The current distance between the widgets on the form are too wide.


    Allow us some more time to identify the right CSS code needed to fix the issue. I'll be back shortly.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2017 at 04:04 PM

    Please try add the next CSS codes on your form 



      margin-bottom: -40px !important


    I tried it on my test form https://form.jotformpro.com/71595703401958   and it seems to work.

    The TextArea input box is still auto expanding while the gap between them had been reduced.


    Let us know if still did not work.

  • Profile Image

    Answered by 87Discount on June 09, 2017 at 04:20 PM

    Thanks, it works. I'm doing a bunch of these and so it would be more efficient for me if I asked one more question which is how can I apply this more generally as I have to use this widget a lot. How would I go about targeting the widget generally to use this code. The advanced editor seems to have trouble with it.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2017 at 04:32 PM

    You must be referring on how to find out the correct field ID#.

    I used the Form Builder for it. The widgets or fields have properties.

    In the Advanced option you can check the Filed ID#



    An alternative is to use the browser inspection tool.



    Let us know if you need further assistance.