Textareas with a 100% width and no overflow

After a poke-around in the Facebook source code a colleague of mine found this awesome little technique to get textareas with a width of 100% to behave exactly as you want them to.

If you just slam { width:100% } on the textarea you usually end up with a textarea that overflows its container. That since the textarea’s width will be 100% + padding + borders. You need to counter the padding and borders.

The absolute easiest way to do that is to add padding to the wrapping element.

  1. <!doctype html>  
  2. <html lang="en">
  3. <head>
  4.  <style>
  5.   label { padding: 0; marign: 0; display: block; }
  6.   textarea { width: 100%; border: 1px solid #333; padding: 4px; }
  7.   .the-fix { padding-right: 10px; }
  8.  </style>
  9.  
  10. </head>
  11.  
  12. <body>
  13.  <label class="the-fix">
  14.   A good-looking textarea with a 100% width
  15.   <textarea></textarea>
  16.  </label>
  17. </body>
  18. </html>

The width of the input is 100% of its container + 1px + 1px (borders) + 4px + 4px (padding). In other words the width is 100% + 10px; Therefore we give the fix class an extra 10px padding to the right.

687 days ago

Read one article about glass; read this one about Corning, Corning’s Gorilla Glass, Apple and the future. http://t.co/xakeeQzU (via @VirUZI)

688 days ago

I just bought CHTEMELE; a boardgame about HTML5 for 2 – 5 players. http://t.co/kbpQLivu

690 days ago

A normal male ejaculation is equivalent of 16 terabyte of information. http://t.co/tkLndAwg

692 days ago

We are 18, we have no work, we don’t study, we are Anonymous. -We know. http://t.co/NHPa7gjR

692 days ago

We are 18, we have no work, we don’t study, we are Anonymous. -We know. http://t.co/NHPa7gjR

693 days ago

Anonymous plan to DDoS the Central Bank of Sweden’s website, in the middle of the Swedish night, to hurt our economy. Have fun, Goodnight :)

693 days ago

Book trailer for Instant: The story of Polaroid [the Apple of the 60s]. http://t.co/y4srSGmP