How can I have an expanding textarea?

Written Jun 22, 2015 15:11

A user requested a textarea that grew longer as more content was entered so that all of the content was visibe without scrolling.

Here's a solution I have adapted for ChronoForms from this StackOverFlow answer.

First add a textarea to your form in the Designer tab and give it an id e.g. textarea1

In the Setup tab drag in Load CSS and Load JavaScript actions to the On Load event and move then up before the HTML (Render form) action.

Open the Load CSS action and add this CSS, adjusting the heights and widths to suit your form:

div#fin-textarea1 textarea {
  min-width: 270px;
  width: 270px;
  height: 22px;
  line-height: 24px;
  min-height: 22px;
  overflow-y: hidden; /* needed to block a bug */
  padding-top: 1.1em; /* needed to block a bug */
}

Open the Load JavaScript action and add this JavaScript

jQuery(document).ready(function (jQ) {
  jQ('#fin-textarea1').on( 'keyup', 'textarea', function (){
      jQ(this).height( 0 );
      jQ(this).height( this.scrollHeight );
  });
  jQ('#fin-textarea1').find( 'textarea' ).keyup();
});

Change the highlighted textarea id to match the one in use in your form.

Save and test

This example is written for a single textarea, you can use it for more than one either by copying the code again or by editing the CSS selectors to include more than a single element.

FAQs