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... ?
Solved! Go to Solution.
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.
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.
Done everything as per the instructions.
Control Css Class: myTextAreaClass
JS Block is fine too.
Whenever i reach end of the text box it just starts scrolling. Any other setting missing?