JQuery slideDown: Parent element not expanding?
This problem occurs in our beloved Internet Explorer 7:
I have a list of elements, each with a hidden child div. When the user clicks the expand button on any list item, the hidden div will expand downward and push all content from the bottom.
This works the same as in FF, Chrome, IE8, but IE7 will not expand the parent along with its children. This is noticeable because the topmost parent container has an absolutely positioned image at the very bottom (yes ... rounded corners) - it doesn't push downward when the content expands.
I'm guessing because of the absolute positioning ... Just wondering if I'm trying to try and copy some huge workarounds in jQuery just for this (if I can), or if it's a known issue of some kind.
My HTML:
<div id="container">
<ul>
<li>Click here to expand
<div class="hide"></div>
</li>
<li>Click here to expand
<div class="hide"></div>
</li>
<li>Click here to expand
<div class="hide"></div>
</li>
</ul>
<div id="containerbottom"></div>
</div>
CSS:
#container { position:relative; }
#container #containerbottom { position:absolute; bottom:0px; left:0px; }
jQuery is pretty much your day to day slides function:
$('ul li').click(function() {
$(this).children('.hide').slideDown(200);
});
Any ideas?
a source to share
after a lot of testing, this is what i found out:
$(document).ready(function(){
$('ul li').click(function() {
$(this).children('.hide').slideDown(200, function(){
if($.browser.msie && $.browser.version == '7.0' ){
$('#containerbottom').css('top',$(this).closest('ul').height()+'px');
}
});
});
})
it's not that good, but it fixes the problem ...
a source to share