Unwrongest

Hello, my name is Jan Jarfalk and I'm an interaction designer and interface developer. This, my lab, is where I learn and evolve.

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.

3 days ago

Wow! I don’t even remember anymore how I managed before this new awesome boilerstrap. http://t.co/bWzwqVf2

3 days ago

If you like coding and competing and want to see Stockholm at its best; Checkout Escape from /dev/null – DICE edition. http://t.co/0SapzZxz

4 days ago

Going where none has gone before and pushing the boundaries of what has been called done. Mine, @soe, @tussetor #SthlmStartupHack app ≈Done