How to Set Textarea Width with 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>

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/

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>
 

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>

Possible to have an initial width of textarea but leave it adjustable?

Use jQuery UI resizable()

Inside it you can call the resize event to set hidden field value.

Working example https://jsfiddle.net/icecred/Lco2gkh3/6/

HTML:
<textarea></textarea>

CSS:

textarea {
    height: 250px;
    width: 200px;
}

JS:

$("textarea").resizable({
    resize: function(e) {
        // on resize: set hidden input value
        var height = $(this).css('height');
        var width = $(this).css('width');
        // set hidden input value here
    }
});

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.

---

Related Topics