Auto Expand Textarea

The expected behavior for setting the height of an textarea in HTML is to use the rows attribute. Then, any overflow on the text will be visible through a scroll. What if we didn’t want to scroll? What if we always wanted to see the entire text?

First, create a new textarea element in the HTML wrapped by a div.

<div class="expandable-textarea">
    <textarea
        placeholder="Description"
        oninput="this.parentNode.dataset.replicatedValue = this.value"
    ></textarea>
</div>

💡

Look closely into the oninput property. This line sets a new data set in the parent element, which is the div wrapper element, which can then be used within the CSS to set the height.

Pro tip: You can add the below snippet within the opening tag to minimize the textarea to the original size when it loses focus (user clicks/tabs away) and the feature to auto expand when the element gains focus (user clicks/tabs into the textarea).

onblur="this.parentNode.dataset.replicatedValue = null"
onclick="this.parentNode.dataset.replicatedValue = this.value"

Then, set the styling in the CSS file.

.expandable-textarea {
    display: grid;
}

.expandable-textarea > textarea,
.expandable-textarea::after {
  grid-area: 1 / 1 / 2 / 2;

  /* Custom styling goes here */
  font: inherit;
  font-size: 14px;
  padding: 0.5rem;
  border: 1px solid #c0c0c0;
  border-radius: 8px;
}

.expandable-textarea > textarea {
  resize: none;
  overflow: hidden;
}

.expandable-textarea::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

If you need to style the textarea, make sure that the styling goes below the commented line so that the same properties are applied to the parent element.

Voilà! No more scroll bar.

https://codepen.io/namitoyokota-the-bold/pen/ExMMaWv?editors=1100

Thanks to Christ Coyier for his blog post.

Namito’s Clean Code

Namito’s Clean Code

Auto Expand Textarea

Are you tired of scrolling within the textarea? Just expand them!