Make textarea scale vertically to fit text?

Question

I have created a textarea that outputs custom text. I want to have it scale to fit the text if there is too much, and not have to scroll (unless the textarea is a certain height). I also do not want to be able to manually scale the textarea. How would I go about doing this? Thank you in advance.

[HTML Tag](http://www.w3schools.com/tags/tag_textarea.asp) – ozil Apr 08 '15 at 07:04 — ozil, Apr 08 '15 at 07:04
do you also want textarea of fixed width? – nehal gala Apr 08 '15 at 07:10 — nehal gala, Apr 08 '15 at 07:10

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

You might want to take a look at this. Seems to be a solution for you problem. There is a jsfiddle in the accepted answer that shows the result.

To take out the most important function see below. It sets the textareas height equal to its scrollHeight.

function resize () {
    var text = document.getElementById('text');
    text.style.height = 'auto';
    text.style.height = text.scrollHeight+'px';
}

edited May 23 '17 at 11:43

Community

1
1

answered Apr 08 '15 at 07:04

Tobias Kloss

308
1
4
10

it would be better (since you post an answer) to be self-contained and also reference the original answer – Nikos M. Apr 08 '15 at 07:23
You mean copying the answer from the other thread, so in case it gets deleted/lost the answer is still available? – Tobias Kloss Apr 08 '15 at 07:28
well i wouldnt say copy exactly, rather do a creative reformulation ;) – Nikos M. Apr 08 '15 at 07:31
I have added some information about the function of wich I think its the most important. – Tobias Kloss Apr 08 '15 at 07:38

score 0 · Answer 2 · answered Apr 08 '15 at 07:06

0

You have do this via CSS

textarea
{ 
   overflow : auto;
}

answered Apr 08 '15 at 07:06

Issac Johnson

148
3
11

Make textarea scale vertically to fit text?

2 Answers2