How to Disable Resizing for a Textarea in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to disable or control textarea resizing in Webflow.

Example

CSS solution (recommended)

This is the simplest solution. Add this CSS in a global embed or in your Webflow styles via an embed on the page.

textarea {
  resize: none;
}

/* Or target a specific class: */
.mon-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

Auto-expanding textarea

For a textarea that grows automatically with the content (without a visible scrollbar):

document.querySelectorAll('textarea').forEach(function(ta) {
  ta.style.resize = 'none';
  ta.style.overflow = 'hidden';
  function autoResize() {
    ta.style.height = 'auto';
    ta.style.height = ta.scrollHeight + 'px';
  }
  ta.addEventListener('input', autoResize);
  autoResize();
});

Conclusion

resize: none is the fastest CSS solution to apply. The auto-expanding script improves the UX even more.