TextArea element - default size to fit content

css, html, jquery

Solution

Making the comment an answer for future reference:

Checkout jquery-autogrow

Problem

If I set a fixed width on a textarea element is there an elegant way of setting the height default to a size that would allow all it's content to fit? I was hoping to avoid hard-coding anything in jquery that would compare text.length and try to equate a value to a height, but maybe that is the only way, i'd love to see some native css rule if possible but I can't seem to think of any off the top of my head. I've created a fiddle illustrating what I am trying to accomplish. http://jsfiddle.net/edZgm/ here's the code: CSS: ``` textarea { overflow: hidden; } ``` JQuery: ``` $('document').ready(function () { $('textarea') .width(500); //I have a width set, but see how the height defaults to a rediculously small amount. //I'd like to have the height default to fit everything on load. }); ``` HTML: ``` <textarea> ... lots of text </textarea> ``` Thank you in advance.

Original source