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.

2 days ago

Photoshop Pro Tip: Edit –> Keyboard Shortcuts: Delete Help shortcut.

5 days ago

Self-driving cars now legal in Nevada. http://t.co/KJhEZmhG That’s one small step for man, one giant leap for Skynet.

5 days ago

Self-driving cars now legal in Nevada. http://t.co/KJhEZmhG That’s one small step for man, one giant leap for Skynet.

9 days ago

All URLs are URIs, but all URIs are not URLs.

11 days ago

“And I will always love you” It’s weird when people die.

11 days ago

“I believe that what doesn’t kill us makes us bitter.” Chuck Lorre vanity card 1. http://t.co/G6HJ1fUa