Textareas cut off inside table cell due to two jquery plugins: Elastic Textarea and Validate (IE7 debugging)

Question

http://jsfiddle.net/BuYCM/

In the above, there is a table with a text area. The textarea is cropped inside the table cell UNTIL a character is typed in it, then the table cell resizes to accommodate the textarea. I can't figure out why this is happening.

One bizarre thing I noticed is that if I disable the remove the .elastic() call, then the cell resizes only after a charachter has been input AND the textarea loses focus.

Answer 1

Place an additional inline style, width:auto, on textarea name="AAR_2010.16.01.86":

<TEXTAREA style="WIDTH: auto; OVERFLOW: hidden" class=normal-size name=AAR_2010.16.01.86 jQuery16209670659500836586="4"></TEXTAREA>

Do the same to AAR_2010.16.01.46 and remove the column specification as you did with .86 above:

<textarea class="normal-size" name="AAR_2010.16.01.46" rows="2" cols="" style="width:auto;"></textarea>

I can't tell you why this works, I can only tell you that it does (at least, with IE8 in IE7 mode).