Scrolling an input within a TD cell

[dkperez]

I have a basic multi-column tabular form. In one column I have a comment field that may contain more text than will fit in the field space on-screen. Currently, it scrolls horizontally, which is not very usable.

I would like to have vertical scrolling in the table cell. When the form displays, if the cell contains more data than will fit in the horizontal space I'd like it to wrap and be visible, pushing the next row down so the cell displays the whole set of text within the cell area. Only then should the scrollbar show up.

If the user enters data (this is an input text field), I'd like it to do the same thing. Wrap on word boundaries and stay visible rather than scrolling a single line horizontally.

I found the whole "div" scroll thing, and it works fine EXCEPT (apparently) when the TD contains an input field. How do I do this in html? Or, at worst, with a little CSS? Or, even worse, very simple javascript?

[Fang]

input element can't be scrolled, use a textarea

[dkperez]

OK, that works partially...... But, this particular column is for comments, and many of the rows may not have a comment. So, I'm trying to make the textarea dynamic so it'll resize as text is displayed or entered.

I found this example, but it either doesn't work, or doesn't do what I'm thinking it does... I'd like to start with the textarea the same height as all the other columns. Currently, my definition looks like:

<td align=left><textarea style="width:99%; height:16px;" wrap="soft" name="Comment[]" onkeyup="sz(this);" onclick="sz(this);"> </textarea></td>

And the function is supposed to make the area dynamic (as I read the description)

function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}

I'm woefully ignorant in javascript, but it doesn't appear to work... Ideas?