Expand Multiple Lines Input to Auto height depending on the length of the text

This thread is resolved. Here is a description of the problem and solution.

Problem:

I am trying to expand the a multiline text input that i have in a cred form depending on the length of the text. Please see gif:

https://toolset.com/forums/topic/expand-multiple-lines-input-to-auto-height-depending-on-the-length-of-the-text/#post-1192303

Solution:

It needs custom codes, For example, add below JS codes in your post form:

https://toolset.com/forums/topic/expand-multiple-lines-input-to-auto-height-depending-on-the-length-of-the-text/#post-1192324

Relevant Documentation:

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 3 replies, has 2 voices.

Last updated by Luo Yang 5 years, 10 months ago.

Assisted by: Luo Yang.

Author

Posts

January 29, 2019 at 12:02 am #1192303

Nashaat

Hi, I am trying to expand the a multiline text input that i have in a cred form depending on the length of the text. Please see gif

Is there a way to make the multiline input work like in toolset example?

January 29, 2019 at 3:15 am #1192324

Luo Yang

Hello,

There isn't such a built-in feature within Toolset form plugin, it needs custom codes, I have searched it in google and found some related threads, for example:
hidden link

For example, add below JS codes in your post form:

$(document).ready(function () {
  
  $('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);
  }

});

And test again

January 31, 2019 at 2:45 pm #1193801

Nashaat

This works great. Thank you for your support.

February 1, 2019 at 1:28 am #1194074

Luo Yang

You are welcome