Question

Dynamically adjust the field height of a multi-line field

Forms

Updated January 17, 2020

asked on June 10, 2015

Hi,

Is it possible to dynamically adjust the field height of a multi-line field according to the length of the text entered (to avoid scroll bars)? I can't seem to make it work using jQuery, regular JavaScript and such. I'm using Forms 9.2.1.1069.

Thank you.

2 0

Answer

SELECTED ANSWER

replied on June 10, 2015

You can use this Javascript

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

});

Just give your multi-line field the CSS class autoadjust

6 0

Replies

replied on February 1, 2018

Not sure if anyone is able to please help? --> I noticed using this Javascript with Pagination tabs works perfectly on the 1st tab, but all other tabs display the field height extremely small (regardless of the number of lines entered). The height does auto size when text is entered, but would be ideal to display it correctly. See example attached.

Multi-line height on page tabs.JPG (11.27 KB)

| Download

1 0

replied on January 17, 2020

I too am struggling with the issue @Grant Callaghan mentions. It's not limited to pagination though. It includes any fields that are hidden on page load. I have several explain-your-answer type fields that show when a radio button is selected. They are set to dynamically adjust their height and when they unhide they are tiny just like Grant's snip. Thus making them difficult to click to put your cursor in. After you get your cursor in there they adjust, but that is obviously not ideal.

Any hints or ideas how to correct this behavior with this code?

0 0

replied on June 10, 2015

Hi Marlon,

I haven't tested the solution on this site, but it may work for you. http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length

0 0

replied on June 10, 2015

Hi Eric,

I very much appreciate your response and help. Unfortunately, the suggested solution on the link you gave didn't work, as well as the other numerous solutions from various sites I've tried before.

Thanks again!

0 0

replied on June 10, 2015

Hi Alexander,

Thank you very much for this! Works like a charm.

0 0

replied on July 12, 2017

Alexander,

Thanks, this was really helpful! This really ought to be a feature in the product!

Alon

0 0

You are not allowed to follow up in this post.

Question

Question

Dynamically adjust the field height of a multi-line field

Answer

Replies

Sign in to reply to this post.