Problem with JavaScript in IE

M

mc

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>
 
M

marss

mc said:
Any ideas how I can adjust the JS to stop the Table getting reshaped?

Adjust the html instead of the javascript. Remove all colspans, place
the last row in the separate table.

<table border="2" style="width:100%;">
<tr>
<td class="question">Text:</td>
</tr>
<tr>
<td class="answer">
<textarea rows="4" cols="20" id="tbOne"
onkeyup="ResizeTextBox(this,4)" style="width:98%;"></textarea>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td style="width:300px;">Check Box:</td>
<td><select><option value="X">X</option></select></
td>
</tr>
</table>
</td>
</tr>
</table>
 
M

mc

Ok, Thats one potential solution, however, The "real" table is
considerably larger than the one presented in my demo example. As I
would like to use the TextBox and associated JS anywhere without making
specific design discisions I was hoping to get a JS answer.

My gut instinct tells me it's another IE problem and there is no simple
answer and that something like the solution you present is the only answer.

Thanks


MC
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top