Change Size of Textarea

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>

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 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:

Sample Image

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>

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>

How do I set the default size of a textarea separately from the minimum size?

You have to use min-width and min-height for your text area.

<textarea rows="4" cols="10" id="myTextArea">Welcome to StackOverflow</textarea>

In css use:

#myTextArea {
    min-width: 50px;
    min-height: 60px; 
}

Creating a textarea with auto-resize

This works for me (Firefox 3.6/4.0 and Chrome 10/11):

var observe;if (window.attachEvent) {    observe = function (element, event, handler) {        element.attachEvent('on'+event, handler);    };}else {    observe = function (element, event, handler) {        element.addEventListener(event, handler, false);    };}function init () {    var text = document.getElementById('text');    function resize () {        text.style.height = 'auto';        text.style.height = text.scrollHeight+'px';    }    /* 0-timeout to get the already changed text */    function delayedResize () {        window.setTimeout(resize, 0);    }    observe(text, 'change',  resize);    observe(text, 'cut',     delayedResize);    observe(text, 'paste',   delayedResize);    observe(text, 'drop',    delayedResize);    observe(text, 'keydown', delayedResize);
    text.focus();    text.select();    resize();}

textarea {    border: 0 none white;    overflow: hidden;    padding: 0;    outline: none;    background-color: #D0D0D0;}

<body onload="init();"><textarea rows="1" style="height:1em;" id="text"></textarea></body>

How to adjust textarea size with javascript?

You can change the size of a textarea by chaning the cols and rows. If you want to expand and then shrink back to normal size you could define them as:

var textarea = document.getElementById("queryText");

var largeRows = "20";
var largeCols = "100";
var normalRows = textarea.rows; // Or smaller if you want this
var normalCols = textarea.cols; // to shrink more than normal.

And you could use a single button to resizing, changing the value or innerHTML of it to detect wheter you are expanding or shrinking:

HTML

<button id="size">+</button>

document.getElementById("size").onclick = function()
{
    if(this.innerHTML == "+") {
        textarea.rows = largeRows;
        textarea.cols = largeCols;
        this.innerHTML = "-"
    } else {
        textarea.rows = normalRows;
        textarea.cols = normalCols;
        this.innerHTML = "+"
    }
}

Here is an example.

I don't think you need to save the data, as it will be there even if you shrink this or hide the textarea. But to get the text inside you can do textarea.value. And save it to a variable or localStorage, depending on you want to do.

Increase textarea size of an input in HTML without CSS

Modify the rows and the columns and get the derired width and height for your textarea.Also remove type="textarea" and just type at the beginning of the element textarea.Example show below:

<textarea rows="4" cols="100" name="skills" placeholder="list the skills you require here"  style="resize:none" required>