I've written some Javascript to resize a text box once the text gets too
long to fit, however running the function (in IE7) has a rather odd side
effect.
If you open the page and type in a text string (one line of text) longer
than 43 (ish) characters it reshapes the surrounding table, ignoring the
explicit column width set on the first column.
It's best viewed in a browser, but for those that would rather not I'll
try and explain what is happening.
If you enter text that causes the function to set the value of
textBox.Rows and a Row contains a string longer than the width of the
first Column it ignores the Column widths set on the surrounding table
and sets it's own value.
Any ideas how I can adjust the JS to stop the Table getting reshaped?
Works fine in Firefox, I'm guessing it's another IE7 "Feature".
TIA
MC
----Entire Page Below this line----
<html>
<body>
<form>
<script type="text/javascript">
<!--
function ResizeTextBox(textBox,minRows) {
rowWidthInChars = parseInt(textBox.offsetWidth / 8)-2;
textBoxLines = textBox.value.split('\n');
newRowCount = 1;
for (x=0;x < textBoxLines.length; x++) {
if(textBoxLines[x].length >= rowWidthInChars) {
newRowCount += Math.floor(textBoxLines[x].length/rowWidthInChars);
}
}
newRowCount += textBoxLines.length;
textBox.rows = newRowCount;
if (textBox.rows < minRows) {
textBox.rows = minRows
}
}
// -->
</script>
<table border="2" style="width:100%;">
<tr>
<td class="question" colspan="2">Text:</td>
</tr>
<tr>
<td class="answer" colspan="2">
<textarea rows="4" cols="20" id="tbOne"
onkeyup="ResizeTextBox(this,4)" style="width:98%;"></textarea>
</td>
</tr><tr>
<td style="width:300px;">Check Box:</td>
<td>
<select>
<option value="X">X</option>
</select></td>
</table>
</form>
</body>
</html>
