Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 831
SebastianHannes Avatar asked Aug 21 '16 19:08

SebastianHannes


People also ask

How do I fix the width of my 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.

Which attribute is used with textarea to specify width of the area?

Definition and Usage The cols attribute specifies the visible width of a text area.

How do I change the width of a textarea in HTML?

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.

How do I Auto Expand textarea?

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.


Video Answer


2 Answers

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%;
}
like image 119
Abensur Avatar answered Nov 01 '22 19:11

Abensur


Set a max-width on the element.

textarea {
  max-width: 100%;
}
<textarea></textarea>
like image 21
Bram Vanroy Avatar answered Nov 01 '22 19:11

Bram Vanroy