18

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>

6 Answers 6

41

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%;
}
12

Set a max-width on the element.

textarea {
  max-width: 100%;
}
<textarea></textarea>

0
7

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.

1
  • 1
    I like this comment, it make sense and seems to be the easiest solution Feb 26, 2020 at 1:42
6

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

3

you can disable text area resize by:

textarea {
   resize: none;
}

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

1
  • 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! Jul 19, 2017 at 0:33
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.