Disappearing <textarea> after $.slideDown()

I'm having an issue in IE7 and below where a form that I'm toggling the display of via $.slideUp() & $.slideDown(), has an disappearing textarea.

This is the form code:

<% using (Html.BeginForm("AddComment", "Comment", FormMethod.Post, new { id = "addCommentForm", @class = "comments-form" }))
 { %>
    <input type="hidden" name="SiteID" value="<%: Model.Name %>" />
    <table>
        <colgroup>
            <col class="comments-form-text" />
            <col class="comments-form-submit" />
        </colgroup>
        <tbody>
            <tr>
                <td>
                    <textarea name="Text" rows="2" cols="75"></textarea>
                </td>
                <td>
                    <div>
                        <input type="submit" value="Add Comment" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <% } %>

I'm toggling the display on a button click in javascript (using jQuery) with: $('#addCommentForm').slideDown();

My issue is that in IE7 and below, the text area disappears when the form has finished sliding down. It only reappears when I most over the submit button (which has been styled using jQueryUI .button() method).

When I say disappears, it's gone. Looking at the html in the IE Dev Tools, it's html is still there, it's just not being rendered at all.

As much as I absolutely hate IE, I am required to support it :(

Anyone have any ideas why this is happening? Or how I can mitigate it?

Answers


There are some ways of solving this problem:

  • Try using another element, like a span instead of a div element to slideDown. Might be an IE's rendering bug;
  • Another approach, is to set zoom:1; in your CSS to the element you're trying to slideDown;
  • You can also solve this setting a min-height to your sliding element in your CSS;

Setting a width on the element will solve the problem. All of @paulillo solutions work well but setting the width will help protect you from other related bugs.

slideDown temporarily sets the position to absolute, which sometimes produces a bug known as the "jump" bug. This happens because sometimes slideDown can't accurately calculate the height when the element width is altered in the brief moment its absolute. I hate setting width unless I have to but in this case, if you can, I would recommend it.


Need Your Help

Iterating through all the cells in Excel VBA or VSTO 2005

excel vba excel-vba vsto

I need to simply go through all the cells in a Excel Spreadsheet and check the values in the cells. The cells may contain text, numbers or be blank. I am not very familiar / comfortable working w...

Get user data using access token in laravel passport client app

php json laravel access-token laravel-passport

I have successfully created server.app and client.app using Laravel Passport documentation. Everything works as expected.