"resize: none;" on textareas is bad UX | CSS-Tricks

Catalin Rosu:

Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.

Removing the default resizeability of a <textarea> is generally user-hurting vanity. Even if the resized textarea “breaks” the site layout, too bad, the user is trying to do something very important on this site right now and you should not let anything get in the way of that. I know the web is a big place though, so feel free to prove me wrong in the comments.

This must have been cathartic for Catalin, who has been steadily gaining a reputation on Stack Overflow for an answer on how to prevent a textarea from resizing from almost a decade ago.

Direct Link →

Comments

Alex McCabe

# January 31, 2020

I agree none is bad, but I think resize: vertical is absolutely fine. It allows the resizing, without breaking your design in weird and unexpected ways (in theory).

What are your thoughts on auto-height expanding inputs?

Wisani

# January 31, 2020

Depends what you’re building. I think good textareas have a size that match their character limit.

Mark Praschan

# January 31, 2020

Why don’t we let users resize when they need extra space, but by planning for it, we can keep things looking nice. Here’s my take: https://codepen.io/markpraschan/pen/BaygPdV?editors=1100

Jelle

# February 4, 2020

I admit, I do use resize: none occasionally, though always in combination with JavaScript that makes the text area longer when the text doesn’t fit anymore.

document.addEventListener("DOMContentLoaded", function(event) {
  function OnInput() {
    this.style.height = "auto";
    this.style.height = (this.scrollHeight) + "px";
  }
  var tx = document.getElementsByTagName("textarea");
  for (var i = 0; i < tx.length; i++) {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
    tx[i].addEventListener("input", OnInput, false);
  }
});

In a way, I think it’s a bit nicer than having the user do it manually.

This comment thread is closed. If you have important information to share, please contact us.