Home/ Questions/Q 319185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:38:18+00:00

I have a few areas in a form I’m producing where I use jquery

  • 0

I have a few areas in a form I’m producing where I use jquery to appendTo a dom element I have created and slide it down as follows:

function createForm(event) {

   var input = $(event.data.element);
   var name = input.val();

   input.attr("disabled", true);
   input.parent().parent().fadeOut("slow", function() {
   $.get('<%=Url.Action("GetForm", "Controller") %>', { name: name },
             function(data) {
                var parentList = input.parent().parent().parent();
                var listCollection = $(data);

                listCollection.hide();
                listCollection.appendTo(input.parent().parent().parent()).slideDown("slow");

                $("#cancel_create").bind("click", { element: input }, revertForm).css({ "cursor": "pointer" });
             }, "html");
   });
}

This gets the html to display and appends it to the parent list. Works perfectly in FF and Chrome. In IE8 it inserts the elements correctly but does not expand the div surrounding the list so the new items appear to overflow. If I focus on another element it suddenly expands, also if I open developer tools it must trigger a redraw and the div expands.

Is this a bug?

EDIT:

Sorry I really should have included this. Html before insert

<li> <!-- This is failing to expand -->
    <h3>3</h3>
    <div class="container">
        <ul> <!-- This is parentList -->
            <li><input id="state1" name="Foo1" type="text" value="" /></li>
            <li><input id="state2" name="Foo2" type="text" value="" /></li>
            <li><input id="state3" name="Foo3" type="text" value="" /></li>
        </ul>
    </div>
<li>

and I am returning some extra list elements and appending them to parentList.

<li><input id="state4" name="Bar1" type="text" value="" /></li>
<li><input id="state5" name="Bar2" type="text" value="" /></li>
<li><input id="state6" name="Bar3" type="text" value="" /></li>

The

Thanks,

Ian

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seems to be caused by the div surrounding the second list. I stripped the page down to basics and the removed the container and it expands.

    This is very odd as the container div itself does expand correctly it just affects its parent element expanding. Both it and the heading element are set as display:inline-block and this seems to be the cause.

    I’ve created a small self contained file to demonstrate. Open in FF/Chrome and then in IE8 for a comparison. If anyone has an explanation it would be very good to hear which one is the correct behaviour. I know which my money is on.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
</head>  

<body>
<ul id="list1">
        <li>ListA</li>
        <li>ListB</li>
        <li style="background-color: Yellow">
            <div style="display: inline-block">
            <ul id ="list2">
                <li>SubList1</li>
                <li id="clickme">Click Me</li>
            </ul>
            </div>
        </li>
    </ul>
<p>In IE8 the content overflows and list1 does not expand. Try double clicking one of the ExtraSubLists and it jumps back into place.</p>



<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            var div = $("<li>ExtraSubList</li>");
            div.hide();
            div.appendTo("#list2").slideDown("slow");
        });
    });
</script>

</body>
</html>
    • 0