# How to make the textarea auto-resize depending on user input

**URL:** <https://discuss.workflowgen.com/t/how-to-make-the-textarea-auto-resize-depending-on-user-input/684>\
**Category:** Form Designer\
**Created:** [January 26, 2017, 7:36pm UTC](https://discuss.workflowgen.com/t/how-to-make-the-textarea-auto-resize-depending-on-user-input/684 "2017-01-26T19:36:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![eddy.daouk](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/eddy.daouk/32/672_2.png) [@eddy.daouk](https://discuss.workflowgen.com/u/eddy.daouk)\
**Post date:** [January 26, 2017, 7:36pm UTC](https://discuss.workflowgen.com/t/how-to-make-the-textarea-auto-resize-depending-on-user-input/684/1 "2017-01-26T19:36:05Z")

</div>

In the Form Designer,

1. Click the ⚙ icon ( **Form Configuration** ).

2. Click **Web References**.

3. Check the option `Include jQuery API and jQuery UI libraries`

4. Add the following code:

```auto
<script>
$(function() {
    // changes mouse cursor when highlighting lower right of box
    $(document).on('mousemove', 'textarea', function(e) {
		var a = $(this).offset().top + $(this).outerHeight() - 16,	//	top border of bottom-right-corner-box area
			b = $(this).offset().left + $(this).outerWidth() - 16;	//	left border of bottom-right-corner-box area
		$(this).css({
			cursor: e.pageY > a && e.pageX > b ? 'nw-resize' : ''
		});
	})
    // the following simple make the textbox "Auto-Expand" as it is typed in
    .on('keyup', 'textarea', function(e) {
        // the following will help the text expand as typing takes place
        while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
            $(this).height($(this).height()+1);
        };
    });
});
</script>

```

4. Click **Ok** to close the pop up, then **Save** the form and test it out!

---

<div class="post-metadata">

**Author:** ![LarryL](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/larryl/32/81_2.png) [@LarryL](https://discuss.workflowgen.com/u/LarryL)\
**Post date:** [August 28, 2017, 12:29pm UTC](https://discuss.workflowgen.com/t/how-to-make-the-textarea-auto-resize-depending-on-user-input/684/2 "2017-08-28T12:29:13Z")

</div>

When I tried this, the static copy of the form shows the field in its original size. Is there a way to show the expanded text field in the “expanded” view on the static copy of the form?

---

<div class="post-metadata">

**Author:** ![eddy.daouk](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/eddy.daouk/32/672_2.png) [@eddy.daouk](https://discuss.workflowgen.com/u/eddy.daouk)\
**Post date:** [September 12, 2017, 12:45pm UTC](https://discuss.workflowgen.com/t/how-to-make-the-textarea-auto-resize-depending-on-user-input/684/3 "2017-09-12T12:45:23Z")

</div>

Hi Larry,

Apologies for the delayed response.

The sample code mentioned changes the height of the textarea only when you type inside the textarea.

What you need is to set the textarea height on page load.

Try adding the following script in the **Web References** module:

```auto
<script>
[...]
$(document).ready(function(){
    $("textarea").height( $("textarea")[0].scrollHeight );
});
</script>

```

Best regards,

Eddy