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.

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.

• javascript

• 1 HTML <textarea> Tag – ozil Commented Apr 8, 2015 at 7:04
• do you also want textarea of fixed width? – nehal gala Commented Apr 8, 2015 at 7:10

2 Answers 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';
}

You have do this via CSS

textarea
{ 
   overflow : auto;
}