Posted about 8 years ago. Visible to the public.

How to: Limit or disable textarea resizing in Chrome and Firefox

Consider this Sass:

Copy
.comment width: 320px; height: 240px;

Any textarea with the comment class will be sized 320 by 240 pixels. In WebKit browsers (Chrome, Safari, ...) or Firefox, this is only the initial size -- users can resize textareas to become bigger.

This is helpful to the user, but may be breaking your application layout in some cases.

If you want to disable it, don't introduce any proprietary CSS properties. Instead, set maximum width and/or height to the values of width and height:

Copy
.comment width: 320px; height: 240px; &.fixed_size max-width: 320px; max-height: 240px;

Usually, it's a good compromise to lock a textarea's width but allow users to resize it in length. That way long texts don't need to be edited in a tiny box:

Copy
.comment width: 320px; height: 240px; &.fixed_width max-width: 320px;

Note that you of course don't need to use the same values for maximum width/height. If you choose larger values, users will be able to resize up to those sizes.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 8 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more