Question

textbox auto expand when typing

Forms

Updated October 2, 2018

asked on November 17, 2015

Hi,

I am currently looking to incorporate this feature via css or jquery, but having a hard time doing so. The reason why I need to implement this feature is to allow users to print out the form, while displaying all of the content in the multi-line box.

This is currently what I have tried but its not working:

});

$(function() {
   $('#Field35(1)').autogrow();
});

2 0

Answer

SELECTED ANSWER

replied on November 17, 2015

I'm not clear on how the textarea is getting its value (users manually typing into it, or coming from a lookup, etc.) but you can give your textarea a CSS class name like autogrow and try this JavaScript

$(document).ready(function () {
  
  $('.autogrow textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }

});

5 0

replied on November 17, 2015

Thank you for the assistance Alex, this is what I was looking for!

0 0

replied on October 2, 2018

Hey Alexander,

I am trying to make a field within a table auto expand. Your code above works perfectly on the first field in the row but when a row is added, the field on the second row doesn't. Any suggestions?

Drew

1 0

Replies

replied on April 7, 2016

Came across this thread which is awesome, but I must be missing something as the starting height is almost just a line. Is there a 'starting height' I can specify?

Thanks in advance!

Text Box Expand.jpg (14.32 KB)

| Download

0 0

View 2 previous replies

replied on April 7, 2016

Actually never mind, it appears that the code has to run near the beginning of the javascript. We have a form with tabs referencing different sections so just an FYI to anyone else, the autogrow will work fine on the first default loaded section, but if you choose another section (currently hidden) by selecting a tab, the field will be a hairline thick as the pic above shows.

Thanks again for your code up above that saved us a lot of time and headache, and one happy customer!!

1 0

replied on July 27, 2016 • Show version history

I recently ran into this issue and figured out a solution that is working for me.

I un-hide every hidden field, run the autogrow commands, and then re-hide the fields.

There may be a better way but I have not run across it.

 $('.autogrow textarea').each(function () {
    h(this);
  }).on('lookup change keyup', function () {
    h(this);
  });
  function h(e) {
    $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
  }

//the next three are to fix autogrow on hidden fields  
//unhide all hidden objects   
  var hidden = [];
  $('.hidden').each(function() {
    hidden.push($(this));
    $(this).removeClass('hidden');
  });
  
//apply autogrow
    $('.autogrow textarea').each(function () {
    h(this); 
  });

//rehide hidden objects
    hidden.forEach(function(entry) {
    $(entry).addClass('hidden');
  });

2 0

replied on April 26, 2017 • Show version history

Great work-around Justin. Any idea what I would add to include collection block additions that have an autogrow in it? (They won't autogrow when adding another collection).

Thanks!

Also, the following day, the autogrow boxes are back to a small line...Any idea what that's about?

0 0

replied on March 15, 2018

I was able to fix the small initial line by using CSS to set a field height to the multi-line text area I was applying the Javascript to

#q7 textarea {min-height: 100px}

2 0

replied on August 13, 2018

Drew, that's a very elegant solution to the problem of these fields being a thin line if put in a default collapsed section, thanks!

1 0

You are not allowed to follow up in this post.

Question

Question

textbox auto expand when typing

Answer

Replies

Sign in to reply to this post.