Can I block Chrome’s <textarea> drag-to-expand feature?

Question

In Chrome, the bottom right of <textarea> fields can be pulled to expand the text area. This has its advantages sometimes, but sometimes, it does not. (This discussion is for another time.)

What I want to know is how I can block this behaviour, if possible. I'm thinking something along the lines of some JS/jQuery dingus, but I don't really know how Google programmed the feature.

Has anyone dabbled with this?

Answer 1

Have you tried using CSS yet to stop this?

textarea {
  resize: none;
}

That should disable the drag-to-expand feature.

Update

You could also set this programmatically by using jQuery:

// CSS
textarea.no-expand {
  resize: none;
}

// jQuery
$('#my-text-area').addClass('no-expand');

Hope this helps!

Answer 2

A bit late to the party, but here goes. The problem with the resize: none solution is that it's not valid CSS. This will not only not validate, but not work on other browsers and might break in future releases of Chrome. A different, valid solution would be:

textarea {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
}

Of course, you should adjust your sizes accordingly. Sure, this doesn't have the flexibility of resize: none (you can't just apply one style to all your textarea s on your page), so, in that regard, resize: none would be better. However, if it's possible for you to use this solution, you should.

Answer 3

Probably the easiest way is to just specify 'resize: none' as a part of your style:

textarea {
    resize: none
}

See http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome for more details.