Problem with JavaScript in IE

Discussion in 'Javascript' started by mc, Mar 11, 2007.

  1. mc

    mc Guest

    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>
    mc, Mar 11, 2007
    #1
    1. Advertising

  2. mc

    marss Guest

    mc wrote:

    > 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>
    marss, Mar 12, 2007
    #2
    1. Advertising

  3. mc

    mc Guest

    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


    marss wrote:
    > mc wrote:
    >
    >
    >>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>
    >
    mc, Mar 12, 2007
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mcdeveloper
    Replies:
    1
    Views:
    4,169
    mcdeveloper
    Jun 13, 2006
  2. CRON
    Replies:
    24
    Views:
    200,435
    Adrienne Boswell
    Jun 20, 2006
  3. Mark Rae

    JavaScript or not JavaScript

    Mark Rae, Sep 5, 2006, in forum: ASP .Net
    Replies:
    36
    Views:
    1,064
    Paul Sture
    Sep 9, 2006
  4. Nathan Sokalski
    Replies:
    4
    Views:
    565
    PJ on Development
    Nov 8, 2007
  5. Andy
    Replies:
    2
    Views:
    216
    kaeli
    Mar 4, 2004
Loading...

Share This Page