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

Looking for a solid way to do application versioning? Look no further. http://t.co/OMYJ2xzF Semantic Versioning guidelines are nifty!

7 days ago

On Amazon: Bad reviews are better for product sales than no reviews. (via @ronnestam )

7 days ago

There are only 180k Twitter users in Sweden, but ~75% of Sweden’s journalists use Twitter. (via @ronnestam )

14 days ago

Sometimes I work offline without the ability to compile or test run my code. Its kind of nice, it forces you to think.

14 days ago

Frequent user of only console.log? Have a look at all the other console functions: for(n in console){ console.log(n) }; They are neat!

17 days ago

Q: How many days does it take the Chinese building company Broad Group to build a 30-story hotel? A: 15 days! http://t.co/8m4wAVxB