Toggle ("slide", {direction: "right"}, 5000) height of parent div problems

Question

I have a problem with the slide effect with jquery-ui. I have a sidebar with several buttons that, when pressed, will spawn another sidebar to pop out of its left edge. One of these "minor sidebars" contains a Google JS map and a sliding one that one of them works great.

Another one contains a discussion with comments regarding the resource displayed by the right sidebar. These discussions are populated using the template plugin, and the code to populate the container is called before calling .toggle ().

As long as the container slides, the container (which has the background color #eee) does not "cover its children in height." I see a field 500x40 pixels in size with the correct background color, and the children of this container are displayed as if their markup was outside the container.

After the animation is complete, the container is stretched vertically to cover all its children, and all this is good. Unfortunately, I cannot give anyone a link to a live example of this code, so I ask for suggestions as to how I can start looking for the problem. It can be anything, but I assume that this is a jquery ui error.

important:
JQuery-UI.slideToggle () does not throw this error, does not .fadeIn () or .toggle (). Unfortunately .slideToggle () does not accept the direction parameter.

thanks

Answer 1

check for floats, make them clear them in a sliding div, immediately before it, and right after it.

Add the following elements after the floating-point element (divs with float: left or float: right)

Most people have a css class called "clear" or "clr"

.clr {clear:both;} 

So you can do

<div class="clr"></div>

It reads a little better since you can use them in the future :)