0

How can I set a textarea to 100% in width? it dosn't work when I say: textarea {width: 100%} in css.

Improve this question
1
  • Seems to work in IE and Firefox. Got any code or additional information? Commented Mar 26, 2011 at 23:04

4 Answers 4

Reset to default
2

There are several ways to fix this issue:

  • Give the parent element a padding-right equal to the accumulated border-width and padding of the textarea (supported by all browsers)

  • Use the box-sizing property to include border and padding when setting width:

    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;

    (supported by IE8+ and all other browsers)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

It does work but a parent element is probably just restricting the width of your <textarea> so without seeing your code there's no specific answer to your question.

Improve this answer

2 Comments

friendsconnect.org/dashboard/dashboard.html If you look at it now, do you know why the textarea seems to be longer than the parent DIV? I set the two textareas to 100% but they go outside the div? Why should I be doing differently
@Pete Allport: Adding padding and border to the <textarea> makes it wider than 100%. You'll need to give it an absolute value like 418px instead.
0

Make sure all of the parent elements have an appropriate width - post more information if that doesn't help.

Improve this answer

Comments

0

You are forgetting a semi-column:

textarea { width: 100%; }
Improve this answer

4 Comments

It's not required for the last rule. See pretty much every answer I've written on this site.
@thirtydot: this does not make a difference here, but I disagree: even though it is totally not required, it is good style, making maintenance a bit easier (unless you're optimising bytes). (Although I'm the last one to talk, I often omit curlies on one-line if statements blush )
@Amadan: It depends on how you look at it; because I always omit that last semicolon, I'm always aware, so it doesn't affect the difficulty of maintenance for me in the slightest, whether I'm looking at CSS that is omitting it or not. ;)
friendsconnect.org/dashboard/dashboard.html If you look at it now, do you know why the textarea seems to be longer than the parent DIV? I set the two textareas to 100% but they go outside the div? Why should I be doing differently

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.