Unable to set the height dynamically to textarea

Question

I've a textarea where the height of the textarea will increase dynamically based on the length of the text goes inside. Once it reaches the height of 200px the scoll appears. Somehow, I am unable decrease the height when I delete the text after scroll appears. The height remains constant even though the content is not fully occupied.

I am trying to match with the textarea(dynamic) present in https://www.intercom.com/ chat.

HTML & JS

  <div class="container">
      <textarea placeholder="Text goes here..." onkeydown="expand(this)" onkeyup="expand(this)"></textarea>
    </div>
    <script>
      function expand(element) {
        if (element.scrollHeight < 200) {
          element.style.height = "0px";
          element.style.height = (element.scrollHeight) + "px";
        } else {
          element.style.height = "200px";
          element.style.overflowY = "auto";
        }
      }

    </script>

CSS

.container {
  min-height: 16px;
  max-height: 200px;
  width: 300px;
}

.container textarea {
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  color: #565867;
  background-color: #f4f7f9;
  resize: none;
  //border: none;
  overflow: hidden;
  font-size: 14px;
  width: 100%;
  height: 100%;
}

Fiddle here

When I write enough text the scroll bar appears, and when i delete some of the text the scroll bars is removed and the textarea is getting smaller. so i cant seem to recreate the problem from your fidler. — Carsten Løvbo Andersen
I am and as I said, I can't recreate what you describe as not working. — Carsten Løvbo Andersen

Carsten Løvbo Andersen Carsten Løvbo Andersen · Accepted Answer · 2017-05-18T11:56:16

Change the following code to make it work

.container {
  min-height:18px;
  max-height: 200px;
  width: 300px;
}

into

.container {
  height:18px;
  max-height: 200px;
  width: 300px;
}

Unable to set the height dynamically to textarea

1 Answers