I have been trying to determine the best possible way to create an auto expanding text area for the past couple of hours now. I have been using my best friends aka firefox and firebug and jquery to test the feasibility of the various proposed solutions that are scattered across the internet. Some say, you can use timers, some say you can use a hidden div technique. I think ill go for the hidden div technique along with timers, just for fun sake.

However the surprising part of all is that the easiest way that this could be accomplished was in IE which did not require any coding AT ALL!!

<textarea style="overflow: visible;"></textarea>

I feel pretty strange! I mean, wtf! How is it possible for something to have such an easy solution in IE but would need workarounds in other browsers like firefox and chrome! When i saw this thing work in IE, i literally had my jaw drop and all my teeth fall off.

Another strange thing that came across was that if you have something like this

<textarea cols="1" rows="1" style="overflow: visible;"></textarea>

Both IE and Firefox will render 2 columns whereas Firefox will render 2 rows! I dont understand how or why. But the same behavior is observer even on increasing the number of rows. The actual number of rows rendered by firefox is always 1 more than the number of rows defined in the 'rows' attribute. As if having extra rows will make the user to enter extra information! Although thats not such a bad idea if you are keeping your textarea for gathering feedback (and hoping that the user does not spam you text area with arbitrary links because of that extra line!).

Anyways, lets see if I make something sleek and sexy for creating the expanding textarea effect. Will be posting it here when its done. Ye can be always be sure of that.