Hi,
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