CODEWITHSUNDEEP
htmlcssresponsive-designtextarea
SebastianHannes
SebastianHannes

Reputation: 281

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

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>

Upvotes: 19

Views: 56536

Answers (6)

codejockie
codejockie

Reputation: 10912

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.

Upvotes: 1

Hamonbatra
Hamonbatra

Reputation: 178

you can disable text area resize by: 

textarea {
   resize: none;
}

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

Upvotes: 3

Abensur
Abensur

Reputation: 594

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

Upvotes: 42

user1946891
user1946891

Reputation: 955

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.

Upvotes: 7

cssBlaster21895
cssBlaster21895

Reputation: 3710

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

Upvotes: 6

Bram Vanroy
Bram Vanroy

Reputation: 28554

Set a max-width on the element.

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

Upvotes: 12

Related Questions