Search code examples
htmlcssresizetextarea

Textarea auto-height-increase

I have html <textarea> and css:

textarea {
  width: 100%;
  max-height: 80px;
  resize: none;
}

If there is a lot of text, I want the <textarea> to increase it's height till 80px and then show a scrollbar. The problem is that <textarea> is 25px(I don't know why, may be my browser set this property) and when there is a lot of text, it shows a scrollbar after 25px. Is there anyway to show a scrollbar only after 80px?

Solution

  • 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>