Resize text area to fit all text on load jquery

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

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 );
});

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.

you can use this. It works for me.

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>

You mentioned there are multiple textboxes. This code will set the height of each textarea according to its own contents.

$(document).ready( function( ) {

    $("textarea").each( function( i, el ) {
        $(el).height( el.scrollHeight );
    ​});

});
    

Fiddle here

Alternatively, you could use an editable div in HTML 5.

Reference : http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

This is an workaround.. and maybe an alternative solution:

 $('textarea').each(function(){
    var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>')
                 .html($(this).val())
                 .appendTo('body')
                 .height();     
   $(this).css('height',height + 'px');
   $('#my-hidden-div').remove();

});

You can see a demo here http://jsfiddle.net/gZ2cC/

The solution of Tormod Haugene worked for me.

But my textareas where in an accordion and apparently it only worked if the textarea was visible on page load. The accordion items are triggered by clicking on elements with the class "title".

So I adapted the code Tormod Haugene to work inside accordion contents, that are set to display: none on page load.

Maybe this is useful for someone else in this situation:

jQuery(document).on('click', '.title', function () {
    jQuery("textarea").each(function () {
	    this.style.height = (this.scrollHeight+10)+'px';
    });
});