Read more

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

Arne Hartherz
July 12, 2012Software engineer at makandra GmbH

Consider this Sass:

.comment
  width: 320px;
  height: 240px;
Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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:

.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:

.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.

Posted by Arne Hartherz to makandra dev (2012-07-12 12:10)