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.
textarea {
position: absolute;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
}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.
div {
position: absolute;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
border: 1px solid #CCC; /* style like textarea */
}
textarea {
width: 100%;
height: 100%;
margin: 0; /* don't want to add to container size */
border: 0; /* don't want to add to container size */
}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.
Conversation
Jonathan -- I have also observed this behavior, and I use the same workaround. Is there something in the spec that would render textareas differently than other form elements?
@Kevin, I didn't take a look at the spec to see what the expected behaviour should be. I'm hoping somebody else will and mention it here. :)
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.
A little javascript can fix that though.
@Benjamin: Thanks for clarifying that. Indeed, that's why I've left padding out of the equation.
Concerning Firefox, it may be *related* to this bug (but different): https://bugzilla.mozilla.org/show_bug.cgi?id=437722
See my testcase in different Chrome and then in Firefox: http://jsfiddle.net/j6dbm/
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.
Here's what it would look like in Webkit without removing the focus outline/border.
@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).
Webkit is wrong. Gecko is correct. Textarea and other form controls are replaced elements, and as such have an intrinsic width. What applies here is CSS2.1:10.3.8
@Philippe: I figured somebody would chime in with relevant information. Thanks for linking to the spec.
Why not to use box-sizing: border-box and set any width you want? Works everywhere except IE<9
@Vasiliy: Because I need it to work everywhere including IE<9 :)
Interesting. I've been looking into doing the same thing for set of reusable base styles for forms: https://github.com/pigment/inputs.
The best I've come up with is to apply the following CSS to the textarea's container:
margin-right: textarea-padding + horizontal-border-widths;
overflow: visible;
This way, the textarea will overflow it's container, but appear fixed to the container's container (make sense? - see example in the github repo above).
Possibly of note: you could ONLY set the bottom/right in Firefox and that would be OK, it's just setting all four that isn't going to happen because of the intrinsic width.
For the record, IE8 supports box-sizing just fine, and it's an awesome property.
Oo. Missed the bit about locking the top/bottom. hmmm
...or a combination of the two?
This is great! I just made it into a snippet in TextMate! Thanks man.
Hi! Do you try to apply display: block to text area with first technique? This works fine.
Sorry... I not fully understand the problem.
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.
you are the cure for my headache.... thank you so much.
I’m nonetheless learning from you, however I’m improving myself. I definitely love reading everything that's written in your blog.Keep the stories coming. I beloved it!
This is a good article. Just Keep it up! Thanks!