Challenge: Expand textarea instead of scroll

Dan_Stoll
Userlevel 7
Badge +11

SO I have had an interesting question put to me, and for the life of my I can't get any CSS tricks to work, so I thought jQuery might be a more elegant solution anyway.. So I found this jQuery Plugin For Smooth Auto-expanding Textarea - autoexpand | Free jQuery Plugins and I thought that is cool.

I'm the first one to put my hand up and say I am not a developer, and it is times like this, that I wish I had some moderate dev skill.. but alas..

So I'm throwing down the gauntlet.. What is the best way to have a multiline text field without using scroll bars that expands and I fill in more text... ?

https://www.linkedin.com/in/stolldan

12 replies

A
Userlevel 7
Badge +17

Challenge Accepted!

I was able to add this plugin to a form and really like how it works on the form. To start, I have a list and a multiline text box using plain text. I created a new Nintex Form for the list and the controls were added. Download the plugin and upload it to your site. I uploaded to the Site Assets library.

dev1.PNG

From the form, go to the multiline text box control settings. Add a value to Control CSS Class. You will reference the internal textarea of the control by this class in JQuery.

dev2.PNG

Now to add the javascript to the form. Go to the Form Settings and in Advanced, add the includes for JQuery.js and the uploaded plugin js path in the Custom JavaScript Includes. Then in the Custom JavaScript area, add the code to reference the auto expand function on the element.

$(function(){

  $('textarea.myTextAreaClass').autoExpand({animationTime: 1000});

});

Included in the function are options for the animation. You can also include window padding options.

dev3.PNG

I didn't make a GIF for you, but when I go to create an item on the list, as I type and go below the available space the first text will go up and disappear. Then the animation comes in and grows the text area height and I see all of the text at once.

Hope this helps to help you implement it as well. Nice find with the plugin!!

X
Userlevel 5
Badge +12

Just wanted to point out a few things:  using the Library you posted as Demonstrated by Andrew does work.  I also got it to work using a different library: jQuery Autosize for the fun of it.

Caveats:  Neither the library I tested will respect the "boundaries" of other controls on the form.   In other words, as the textarea grows larger and larger, they will cover other controls on the form.  So if you had a textbox just below the textarea, it would become hidden as the textarea grew larger.   You could put the textareas within a panel which stops it from overlapping other controls - but it also stops the autoexpanding when the panel runs out of room.  Just some things to think about.

Also - the original Library that you posted:  one you reach the end of the form, the scroll bars will appear in the textarea and allow you to keep typing.    The library I posted will simply blow past the boundary of the form and keep going downward (beyond the form).

PS: Andrew great post, just wanted to point these issues in case Dan or anyone else planned to implement them before knowing the potential limitations.

A
Userlevel 7
Badge +17

Thank you, I'm glad you did. I just wanted to see if I could hook up the library. Thanks for taking the extra steps and testing against common scenarios you would run into with a form.

B
Badge +11

Way to go Andrew!

A
Badge +3

Not working for me. Any idea why it wouldn't?

A
Userlevel 7
Badge +17

Could be many reasons. Not including JQuery correctly, wrong version, wrong CSS class, not using a textarea, other JavaScript or JQuery not allowing the function to run, browser limitation like a JS block.

A
Badge +3

Done everything as per the instructions.

Control Css Class: myTextAreaClass

Added the correct js includes and added the custom javascript function

JS Block is fine too.

Whenever i reach end of the text box it just starts scrolling. Any other setting missing? 

A
Badge +3

It worked.

Our site is https, so the jquery reference needs to be chenged to https plus the js code needs to be in a NWF#(document).ready function.

P
Badge

Hi,
This didnot work for me. Can you please help me out. I have followed the steps as per the instructions given. Am not able to expand the textarea. 


A
Userlevel 7
Badge +17

Any details to what doesn't work? It would be hard to troubleshoot without more information. 

S
Badge +10

It is giving me an error 

Object doesn't support property or method 'autoExpand'

i have used an alert in the starting of the file before autoExpand function, the include is identified by the Nintex form.

F
Badge +4

I am trying this solution but I am finding it very hard to understand it, what I don't understand is where the two URL's are coming from.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings