Problem

Jamie Munro
Jul 29, 2017 · 1 min read

I’m using textarea components in my application, and I control their height dynamically. As the user types, the height is increased whenever there is enough text. This works fine on IE, Firefox, and Safari.

However, in Safari, there is a “handle” tool in the lower right that allows user to resize the textarea by clicking and dragging. I also noticed this issue with the textarea in the stackoverflow Ask a Question page. This tool is confusing and basically gets in the way.

So, is there anyway to hide this resize handle?

(I’m not sure if “handle” is the right word, but I cannot think of a better term.)

Problem courtesy of: david.mchonechase

Solution

You can override the resize behaviour with CSS:

textarea
{
resize: none;
}

or just simply

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

Valid properties are: both, horizontal, vertical, none

Solution courtesy of: Tamas Czinege

View additional discussion.

Jamie Munro

Written by

Author of 20 Recipes for Programming PhoneGap, 20 Recipes for Programming MVC 3, and Rapid Application Development with CakePHP.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade