How can I make a <textarea> that fits within the width of the current viewport?

Question

How can I make it so that my <textarea> doesn't go over the border of small displays? I want that my <textarea> gets the width of the current display.

<textarea></textarea>

Natalienatalina

Answer 1

You need to change its default box-sizing to a different value.

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

    width: 100%;
}

Isacco

Answer 2

Set a max-width on the element.

textarea {
  max-width: 100%;
}

<textarea></textarea>

Mariannamarianne

Answer 3

I agree with all of the above answers but one issue not addressed is that if you don't specify the number of columns the textarea will not actually fill the width of the div or element. So I use the following:

<textarea cols="120" style="max-width:100%;">TEXT GOES HERE</textarea>

I set the number of columns to slightly greater that the width of the div on a large screen and as the screen gets smaller it acts responsive to the screen size.

Ziegler

I like this comment, it make sense and seems to be the easiest solution – Harms

Answer 4

Try textarea {max-width:95%;} - it will always fit your display.

Economy

Answer 5

you can disable text area resize by:

textarea {
   resize: none;
}

and set max-width to the width of the container div or table

Hodosh

Could you edit your answer and go into a bit more detail about how to set the max width. (also, I accidentally down voted your answer and once you edit it I can give it the up vote it deserves.) Thanks! – Tuatara

Answer 6

You can do the following:

div textarea {
  box-sizing: border-box;
  max-width: 50%;
}

<div>
  <textarea cols="100" rows="7"></textarea>
</div>

Setting both max-width and box-sizing ensures the textarea respects its defined width even when the number of cols exceeds the set max-width.

Wil