Disappearing <textarea> after $.slideDown()

Question

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?

Answer 1

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;

Answer 2

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.