Maximising Screen Real Estate With Textareas

We all want to give our viewers the best experience, so here is a quick CSS solution to an age-old problem of screen clutter.

Screen real estate can be very valuable, so you may need to maximise the elements that you have above the fold. This can be difficult when you have a lot of elements, especially if some of them are textareas.

You want to give your viewer the best experience, so you really should give a multi-line textarea when you want to capture large amounts of text. Here is a way to display a single-line textbox which expands when the field gets the focus.

textarea.expandable {
    height: 30px;
    -moz-transition: height ease-in-out .5s;
    -o-transition: height ease-in-out .5s;
    -webkit-transition: height ease-in-out .5s;
    transition: height ease-in-out .5s;

    &:focus {
        height: 150px;
    }
}

So we have a textarea with a class of expandable. It's height is 30px and we are setting a transition on it. This particular transition will ease into a height change, then ease back to the original state once finished.

Then, we set a CSS change for the element's height when the element gets the focus - :focus.

And there you have it. Just put the class of expandable on your textareas and see the transition applied.

Til next time ...