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

Process Design Form Designer
1

In the Form Designer,

  1. Click the :gear: icon (Form Configuration).

  2. Click Web References.

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

  4. Add the following code:

<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!

2

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?

3

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:

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

Best regards,

Eddy