Textarea Auto height

Behind the scenes

To get the workings of this auto-resize system, understanding of scrollHeight is key. It represents the height of an element's content, overflows included.

By setting the style.height to '5px' as an initial move, scrollHeight hands over the height required for content visibility, thus eliminating the scrollbar. Result? A pretty pleasant user experience.

Handling uncommon common scenarios

While the above piece of code is effective, occasionally, specific needs arise. Let's look at some:

Ensuring maximum compatibility

For cross-browser agreement and consistent behavior, using plain vanilla JavaScript is gold. It provides more control and eliminates the need for third-party whatnots.

Dealing with page loads and resizing

To ensure the textarea adapts at page load or window resizes, tweak the autoGrow function:

// Call our snappy function on page load
window.addEventListener('load', function() {
  autoGrow(document.getElementById('textarea'));
});
//Also on window resizing (won't get tired, promise!)
window.addEventListener('resize', function() {
  autoGrow(document.getElementById('textarea'));
});


Being framework/library friendly

In a world where your project speaks jQuery, opt for the AutoSize plugin. With AngularJS? Craft a directive deploying $timeout for scrollHeight changes digestion after DOM updates.

Taming Heights

To keep your textarea within a desired size range, use CSS constraints such as min-height: 50px; and max-height: 200px;.

For the library lovers

Your project could benefit from a stand-alone script or library offering more in-depth features. Autosize.js by Jack Moore fits like a glove. More comfortable with a jQuery plugin? You'll find AutoSize pretty amusing.

Autosize.js in action:

// No sweat, just autosize all textareas!
autosize(document.querySelectorAll('textarea'));


jQuery AutoSize on the go:

// One line, all textareas resized!
$('textarea').autosize();


Trouble, trouble, trouble (and quick fixes)

Efficient as this may seem but often, developers can stumble upon common hurdles:

Scrollbar flicker

Does the scrollbar flash during adjustments? A possible culprit could be a missing overflow: hidden; in your CSS. This keeps the scrollbar from a sporadic hide-and-seek game.

Washed up sizing

If the textarea's initial sizing seems bizarre, the CSS rulebook could be meddled with. Check for any altercations with the autoGrow function's logic. Properties like box-sizing or padding are usual suspects.

On a slow ride

Too many textareas? Or too many adjustments at a rapid pace can be heavy on the performance quotient. To avoid taxing, throttle resize events. Comes handy during window resizing too.