How to adjust the height of the TextArea autosize widget?

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?

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. 

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.

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.

Thanks.

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.

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.

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. 

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.

Please try add the next CSS codes on your form 

#id_41,#id_42,#id_43,#id_44,#id_45{

  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.

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.

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#

Example:

An alternative is to use the browser inspection tool.

Let us know if you need further assistance.