jQuery SlideDown and Float issuse
Question by DA.
I’m having an issue with jQuery slideDown when the contents of the object I’m sliding down is floated.
What happens is that that the div slides down WAY past the height of the contents, and then ‘snaps’ to the proper height.
I think (merely a theory) that the div is sliding down based on the height it would be if the contents inside weren’t floated. For instance, if I have 4 floated items, the div seems to expand twice as far than when I have 2 floated items within.
No amount of containing the floats with clearfix hacks seems to fix anything.
The solution I’ve used in the past (and one that is recommended) is to set the height of item via CSS BEFORE hiding it. That way, slidedown knows how far to go.
The catch is that I’m nesting panels that use slide down. I can’t set the height of the parent before hand as it would be calculated based on the nested hidden panels being expanded already.
I could recursively call that function that sets up all my toggle panels…find the innermost nested ones, set the height, collapse the ones I want hidden by default, and then move my way up the hierarchy. But that’d be a performance hit having to traverse so much.
Anyone know of a way to fix this slideDown of floated content without fixing the height via CSS before hand without having to traverse the dom setting heights manually first?
UPDATE:
sample code is here:
(click the page to see it sliding)
This is based on the exact styles I am using and in that particular combination, you’ll see the issue. Note the DIV being set to slideDown has a pink background. It will slide down FURTHER than its contents and then quickly snap back into the proper place.
Answer by Starx
solved:
remove margin-bottom:10px; from your
.itemsWrapper {
margin-bottom:10px;
overflow:auto;
width:100%;
background: green;
}
