0

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

John Doe
  • 3,559
  • 15
  • 62
  • 111

4 Answers4

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)

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
0

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

Josh M.
  • 26,437
  • 24
  • 119
  • 200
0

You are forgetting a semi-column:

textarea {
    width: 100%;
}
orlp
  • 112,504
  • 36
  • 218
  • 315
  • 2
    It's not required for the last rule. See pretty much every answer I've written on this site. – thirtydot Mar 26 '11 at 23:07
  • @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 Mar 26 '11 at 23:22
  • @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. ;) – thirtydot Mar 26 '11 at 23:34
  • 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 – John Doe Mar 27 '11 at 03:36
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.

Marcel
  • 27,922
  • 9
  • 70
  • 85
  • 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 – John Doe Mar 27 '11 at 03:36
  • @Pete Allport: Adding padding and border to the ` – Marcel Mar 27 '11 at 05:48