Reputation: 281
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
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
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
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
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
Reputation: 3710
Try textarea {max-width:95%;}
- it will always fit your display.
Upvotes: 6
Reputation: 28554
Set a max-width on the element.
textarea {
max-width: 100%;
}
<textarea></textarea>
Upvotes: 12