/

I have a text box text inside it already, in the actual application this will be filled dynamically, but for the sake of this question it has been pre filled.

<textarea id="textarea">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor modo ornare. Donec lobortis dui sed lectus egestas tristique. Vivamus vel metus turpis, faucibus varius risus. Aenean ante mauris, ultrices id facilisis vitae, dignissim eget sem. Quisque sed justo lectus, eget aliquet leo. Curabitur in mauris et diam fermentum venenatis. Proin ullamcorper, neque a vehicula euismod, odio enim aliquam ipsum, eu tristique urna sapien nec erat.

Aliquam erat volutpat. In in lacus cursus dolor pellentesque posuere. Cras eu metus urna, a rhoncus ligula. Ut hendrerit orci in arcu dignissim id fermentum orci vulputate. Sed ante ligula, volutpat eu convallis vel, auctor in metus. Mauris euismod, metus eget venenatis sodales, risus tellus volutpat elit, et aliquet massa tellus ut sapien. Mauris tempor posuere massa et consectetur. Duis dignissim enim a nulla ultricies vitae vulputate felis modo. Phasellus mollis est eget odio porttitor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut nibh auctor libero sagittis semper vitae quis erat.
</textarea>​

When I run the above code, it shows a tiny text area with scroll bars all over it. In other words, pletely useless in terms of being user friendly. How do I automatically resize the text box according to the amount of content their is and it has a set width of 600px.

#textarea{width:600px;}​

I would like a javascript/jquery solution.

I have tried the .autoresize solution unsuccessfully, which can be found here:

.jquery.js/view

Note, the height should be resized automatically

http://jsfiddle/h2vMN/1/

I have a text box text inside it already, in the actual application this will be filled dynamically, but for the sake of this question it has been pre filled.

<textarea id="textarea">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor modo ornare. Donec lobortis dui sed lectus egestas tristique. Vivamus vel metus turpis, faucibus varius risus. Aenean ante mauris, ultrices id facilisis vitae, dignissim eget sem. Quisque sed justo lectus, eget aliquet leo. Curabitur in mauris et diam fermentum venenatis. Proin ullamcorper, neque a vehicula euismod, odio enim aliquam ipsum, eu tristique urna sapien nec erat.

Aliquam erat volutpat. In in lacus cursus dolor pellentesque posuere. Cras eu metus urna, a rhoncus ligula. Ut hendrerit orci in arcu dignissim id fermentum orci vulputate. Sed ante ligula, volutpat eu convallis vel, auctor in metus. Mauris euismod, metus eget venenatis sodales, risus tellus volutpat elit, et aliquet massa tellus ut sapien. Mauris tempor posuere massa et consectetur. Duis dignissim enim a nulla ultricies vitae vulputate felis modo. Phasellus mollis est eget odio porttitor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut nibh auctor libero sagittis semper vitae quis erat.
</textarea>​

When I run the above code, it shows a tiny text area with scroll bars all over it. In other words, pletely useless in terms of being user friendly. How do I automatically resize the text box according to the amount of content their is and it has a set width of 600px.

#textarea{width:600px;}​

I would like a javascript/jquery solution.

I have tried the .autoresize solution unsuccessfully, which can be found here:

http://james.padolsey./demos/plugins/jQuery/autoresize.jquery.js/view

Note, the height should be resized automatically

• javascript
• jquery

• possible duplicate of JAVASCRIPT: How to get the height of text inside of a textarea – jcolebrand Commented Jun 19, 2012 at 14:51

3 Answers 3

Thy this:

$(document).ready(function(){
    tx = $('#textarea')
    tx.height(tx.prop('scrollHeight'));
})

DEMO

$(document).ready(function(){
    var heightFudgeFactor = 10;
    var id = 'tempid' + Date.now();
    $('#textarea').after( $('<div>').css('font-family','monospace').css('white-space','pre-wrap').css('word-wrap','break-word').attr('id',id).css('width',$('#textarea').width()).text( $('#textarea').text() ) );
    $('#textarea').css('height',$('#'+id).outerHeight() + heightFudgeFactor).next().remove();
});​

Here's one way of doing it, I'm creating a secondary div that's the height of the textarea, based on content, but you'll need to play with it a little more to get it to your actual liking

I once used this plugin: http://www.jacklmoore./autosize It worked fine.