Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?

Question

I am filling a textarea with content for the user to edit.

Is it possible to make it stretch to fit content with CSS (like overflow:show for a div)?

Answer 1

one line only

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

Answer 2

Not really. This is normally done using javascript.

there is a good discussion of ways of doing this here...

Autosizing textarea using Prototype

Answer 3

This is a very simple solution, but it works for me:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

Answer 4

Here is a function that works with jQuery (for height only, not width):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Note: The op asked for a solution that does not use Javascript, however this should be helpful to many people who come across this question.

Answer 5

Another simple solution for dynamic textarea control.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

Answer 6

Alternatively, you could use a contenteditable element, this will fit to the text inside.

<div contenteditable>Try typing and returning.</div>

Please note that it's not possible to send this value along in a form, without using some javascript. Also contenteditable will possibly generate HTML-content and allows styling, so this may need to be filtered out upon form submit.

Answer 7

Answers here were good but were lacking a piece of code that I had to add to avoid a shrinking that is not welcome when you type for the first time :

var $textareas = $('textarea');
$textareas.each(function() { // to avoid the shrinking
    this.style.minHeight = this.offsetHeight + 'px';
});

$textareas.on('input', function() {
    this.style.height = '';
    this.style.height = this.scrollHeight + 'px';
});

Answer 8

Not 100% related to the question as this is for Angular only.

There is a npm package associated with Angular called @angular/cdk (if using Angular Material Design). There is a property included in this package that can be associated to a textarea called cdkTextareaAutosize. This automatically sets the textarea to 1 line and stretches the textarea to fit the content accordingly. If you are using this library, something like this should work.

<textarea 
  maxLength="200"
  cdkTextareaAutosize
  type="text">
</textarea>

Answer 9

There are a lot of answers here already, but I think some improvement can still be made to the textarea resizing code.

This script snippet will loop over ALL of the textareas on your page, and make sure they resize both on load and on change.

<script>
  document.querySelectorAll("textarea").forEach(element => {
    function autoResize(el) {
      el.style.height = el.scrollHeight + 'px';
    }
    autoResize(element);
    element.addEventListener('input', () => autoResize(element));
  });
</script>

Vanilla JS only, no libraries needed.

Answer 10

Solution for React

I used the length of the text that was being displayed and divided that number by 30 (I adjusted this number until it felt right form my App)

{array.map((text) => (
    <textarea                
     rows={text.length / 30}
     value={text}
    ></textarea>
 )}