How to Set The Width and Height of a Textarea Using CSS

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {  width: 300px;  height: 150px;}

<textarea> </textarea>

How to set textarea to 100% width and height?

The issue is the common white space issue of inline-block/inline element due to vertical alignment. If you check dev tools of google you will see this:

So to fix it you simply need to adjust vertical alignment or make the textarea a block element (like provided in the other answers):

html, body, textarea {  margin: 0;  padding: 0;  border: 0;  width: 100%;  height: 100%;}textarea { vertical-align:top;}

<textarea>Text goes here</textarea>

Change the height and width of text area

Remove the height declaration on the textarea, just specify the rows using rows="2"

<textarea rows="2" cols="200" disabled="disabled" style="width:500px;">
Date
User 
</textarea>

height will conflict with rows and width will conflict with cols.

How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?

<div>  <div style="width: 20%; float: left;">    <p>Some Contentsssssssssss</p>  </div>  <div style="float: left; width: 80%;">    <textarea style="width: 100%; max-width: 100%;"></textarea>  </div>  <div style="clear: both;"></div></div>
 

Textarea to resize based on content length

You can check the content's height by setting to 1px and then reading the scrollHeight property:

function textAreaAdjust(element) {
  element.style.height = "1px";
  element.style.height = (25+element.scrollHeight)+"px";
}

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Unable to set textarea width with CSS

Try removing padding and borders. Or try making them the same for both elements

input[type="text"],
textarea {
    width:250px;
    padding: 3px;
    border: none;
    }

Or:

input[type="text"],
textarea {
    width:250px;
    padding: 0;
    border: 1px solid #ccc;
    }

INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.

UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

---

Related Topics