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.
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.
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.
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!!
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.
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.
Not working for me. Any idea why it wouldn't?
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.
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?
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.
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.
Any details to what doesn't work? It would be hard to troubleshoot without more information.
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.
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.
