Saturday, 3 September 2011

jQuery slideDown() doesn't work on elements with CSS min-height

jQuery v1.6.2

I have an empty div with min-height defined in the CSS. When I use jQuery's slideDown() on it, it doesn't work - the div just instantly appears. Here is the workaround:

var myMinHeight = myElement.css("minHeight");
myElement.css({minHeight: 0}).animate({height: myMinHeight}, "fast", function() {
   $(this).css({minHeight: "", height: ""});
});

First we grab the CSS min-height value. Then we overide it, setting it to 0, and animate our div to the given min-height. At this point, we have what we want, but our CSS is messed up (e.g. say our CSS min-height was originally 120px, now our div will have a fixed height of 120px). This means if we add more content to the div, it cannot grow like we want it to (the very reason we were using min-height in the first place). The solution is simply to reset jQuery's inline style values (see line 3), after which it seamlessly reverts to your original CSS values.


REFERENCES
http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
http://jsfiddle.net/jitter/mLHb9/1/

1 comment:

  1. Thanks was wounding why this was hapening

    ReplyDelete