How to Autogrow a Textarea with CSS

Creating a textarea with auto-resize

This works for me (Firefox 3.6/4.0 and Chrome 10/11):

var observe;

if (window.attachEvent) {

    observe = function (element, event, handler) {

        element.attachEvent('on'+event, handler);

    };

}

else {

    observe = function (element, event, handler) {

        element.addEventListener(event, handler, false);

    };

}

function init () {

    var text = document.getElementById('text');

    function resize () {

        text.style.height = 'auto';

        text.style.height = text.scrollHeight+'px';

    }

    /* 0-timeout to get the already changed text */

    function delayedResize () {

        window.setTimeout(resize, 0);

    }

    observe(text, 'change',  resize);

    observe(text, 'cut',     delayedResize);

    observe(text, 'paste',   delayedResize);

    observe(text, 'drop',    delayedResize);

    observe(text, 'keydown', delayedResize);

    text.focus();

    text.select();

    resize();

}

textarea {

    border: 0 none white;

    overflow: hidden;

    padding: 0;

    outline: none;

    background-color: #D0D0D0;

}

<body onload="init();">

<textarea rows="1" style="height:1em;" id="text"></textarea>

</body>

CSS Textarea that expands as you type text

This cannot be done with CSS alone. try the autogrow jquery plugin.
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

You can also see autogrow demo here http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html

It's lightweight and easy to use. Here's how it's done. Define your textarea id. Include the jquery js file before </body>. Then between script tags, issue the jquery command $("#txtInput").autoGrow();

<body>
    <textarea id="txtInput"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<script>
    $("#txtInput").autogrow();
</script>
</body>

Textarea Auto height

~~It can be achieved using JS. Here is a 'one-line' solution using elastic.js:~~

$('#note').elastic();

Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Jack Moore. This is the working example:

autosize(document.getElementById("note"));

textarea#note {

 width:100%;

 box-sizing:border-box;

 direction:rtl;

 display:block;

 max-width:100%;

 line-height:1.5;

 padding:15px 15px 30px;

 border-radius:3px;

 border:1px solid #F7E98D;

 font:13px Tahoma, cursive;

 transition:box-shadow 0.5s ease;

 box-shadow:0 4px 6px rgba(0,0,0,0.1);

 font-smoothing:subpixel-antialiased;

 background:linear-gradient(#F9EFAF, #F7E98D);

 background:-o-linear-gradient(#F9EFAF, #F7E98D);

 background:-ms-linear-gradient(#F9EFAF, #F7E98D);

 background:-moz-linear-gradient(#F9EFAF, #F7E98D);

 background:-webkit-linear-gradient(#F9EFAF, #F7E98D);

}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

How to auto resize the textarea to fit the content?

addEventListener here is redundant since valueChanges already notifies you when the field changes. Instead, update the height using the ViewChild reference myDiv.

this.myForm.valueChanges.subscribe(value => {
    this.myDiv.nativeElement.style.height = 'auto';
    this.myDiv.nativeElement.style.height = `${this.myDiv.nativeElement.scrollHeight}px`;
});

Then add overflow: hidden to your css so the scrollbar doesn't show.

textarea {
    resize: horizontal;
    overflow: hidden;
}

You can keep the resize: horizontal; but it is no longer required since the textarea will resize automatically anyway.

Here is a working example on StackBlitz.

It is possible to expand a textarea only with CSS?

Instead of textarea , you can use div with contentEditable attribute:

div {

  display: inline-block;

  border: solid 1px #000;

  min-height: 200px;

  width: 300px;

}

<div contentEditable="true"></div>

Textarea auto-height-increase

You really need js to do this, see example below:

var textarea = document.getElementById("textarea");

var limit = 80; //height limit

textarea.oninput = function() {

  textarea.style.height = "";

  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";

};

textarea {

    width: 100%;

}

<textarea id="textarea"></textarea>