resize textbox automatically according to the content

Question

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 commodo 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 commodo. 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, completely 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.com/demos/plugins/jQuery/autoresize.jquery.js/view

Note, the height should be resized automatically

possible duplicate of [JAVASCRIPT: How to get the height of text inside of a textarea](http://stackoverflow.com/questions/3341496/javascript-how-to-get-the-height-of-text-inside-of-a-textarea) — jcolebrand, Jun 19 '12 at 14:51

score 2 · Accepted Answer · answered Jun 19 '12 at 14:36

2

Thy this:

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

DEMO

answered Jun 19 '12 at 14:36

Sergei Zahharenko

1,514
12
16

I admit it, this is a better solution than mine. But mine does do fun javascript things :p – jcolebrand Jun 19 '12 at 14:59

jcolebrand · Answer 2 · 2012-06-19T14:59:24.473

1

$(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

edited Jun 19 '12 at 14:59

answered Jun 19 '12 at 14:38

jcolebrand

15,889
12
75
121

Note that I didn't test this on other browsers, just Chrome, because I was looking for a baseline solution to help get you started. – jcolebrand Jun 19 '12 at 14:43
I figure this forces it to create a box that matches the parent, but in div form, but I know this can create a flicker on the page depending on the size and number of other elements. c'est la vie. – jcolebrand Jun 19 '12 at 18:28
yep, can be useful in some cases, like overflow hidden case, where is no scrollheight... etc – Sergei Zahharenko Jun 19 '12 at 18:35

score 0 · Answer 3 · answered Jun 19 '12 at 14:33

0

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

answered Jun 19 '12 at 14:33

Christian Benseler

7,907
8
40
71

resize textbox automatically according to the content

3 Answers3