Resize text area to fit all text on load jquery

Question

I understand there has been a lot of discussion on this but I have yet to find a solution to fix my needs. Basically I need to autogrow a text area not when you type but on load. I am pulling in content from a database and dependant on the user's settings an overlay is produced over the text area, but upon doing this the text areas are not scrollable therefore I need to autosize these to show all the text.

I have tried scrollHeight but this is not working great as there are multiple text boxes on the screen

Thanks

Answer 1

Try this

$("textarea").height( $("textarea")[0].scrollHeight ); 

DEMO

---

UPDATE

As a hack to make it work in older IE-s just add a really short delay before executing it

window.setTimeout( function() {     $("textarea").height( $("textarea")[0].scrollHeight ); }, 1);​ 

DEMO

UPDATE FOR MULTIPLE TEXTAREAS

$("textarea").each(function(textarea) {     $(this).height( $(this)[0].scrollHeight ); }); 

Answer 2

This worked for me; it loops through all "textarea" elements on page Ready, and set their height.

$(function () {     $("textarea").each(function () {         this.style.height = (this.scrollHeight+10)+'px';     }); }); 

You can also combine it with an auto-expand function, to make it fully dynamic while writing as well:

function autoresize(textarea) {     textarea.style.height = '0px';     //Reset height, so that it not only grows but also shrinks     textarea.style.height = (textarea.scrollHeight+10) + 'px';    //Set new height } 

and call that from an "keyup" event or through jQuery:

$('.autosize').keyup(function () {     autoresize(this); }); 

Note how I am adding 10px to the scroll height: here you can adjust the amount of space you would like the bottom of the text area to give the user.

Hope that helps someone. :)

Edit: Changed answer according to @Mariannes comment.