Snook.ca

Absolutely Positioned Textareas

One method that I've been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based.

I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn't respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. Right and bottom? Ignored.

This didn't work in IE7, IE8, Firefox 4, and Opera 11. It worked in Chrome 10 and Safari 5.

While there may be another way to resolve this, I went with the solution I know would work: wrap the textarea in another element, position that element using the technique I wanted, style it to look like a textarea, and then set the textarea to a height and width of 100% and removing all margin and borders.

Of note, I left padding out of the equation here since it wasn't a factor. If you wished to adjust the padding, you'd want to apply it to the DIV, set a background colour and remove those styles from the textarea as well.

This technique perfectly mimics a textarea in look but not in padding. Right now if you click in the padding of a textarea it'll focus the textarea, but here if you click in the padding of the div, the textarea won't receive focus.

How do you handle :focus highlighting? Of course you can remove it from the textarea with CSS & apply it to the container with JavaScript, but is this really a good solution? This means no focus highlighting for users without JavaScript.

@Jayphen: we've avoided having to deal with :focus highlighting by not adding padding on the container. Otherwise, yes, you'd have to handle focus styling programmatically (or use no focus styling at all).

On the project I'm working on just now I'm using box-sizing property to get these benefits. Setting the input/textarea to 100% width, and for IE 6/7 that don't support box-sizing setting the width to something like 98% or less depending on how much padding and border is used.

I'd much rather do this than back date code to give perfect support to old versions of IE that will be nowhere in a few years. Though I guess there are still situations where you have to do this.

Sorry, comments are closed for this post. If you have any further questions or
comments, feel free to send them to me directly.

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?