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>
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
Definition and Usage The cols attribute specifies the visible width of a text area.
There are two ways of setting the size of the HTML <textarea> element. You can use HTML or CSS. In HTML, you can use the cols and rows attributes.
It can be achieved by using JavaScript and jQuery. Method 1: Using JavaScript: To change the height, a new function is created which changes the style property of the textarea. The height of the textarea is first set to auto. This value makes the browser set the height of an element automatically.
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%;
}
Set a max-width on the element.
textarea {
max-width: 100%;
}
<textarea></textarea>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With