Auto fit CSS attribute to textarea

Question

Hi,

I am working on web application.

I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.

After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.

In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.

I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.

Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.

Thanks,

Pravin

Answer 1

This is not possible with pure CSS, you will need to use JavaScript

Answer 2

It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.

That said, the following works (in Chrome/Ubuntu 10.04):

<div id="wrap">
    <div id="editThis" contenteditable>
    </div>
</div>

With the following CSS:

div#editThis {
    min-height: 4em;
    height: auto;
    width: 50%;
    margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
    border: 1px solid #000;
}

Demo posted at jsbin

Answer 3

If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.

the other thing i have seen is an auto expanding textarea that grown in height as you type.

see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/