Question

I have problem with the slide effect with jquery-ui. I have a sidebar with a few buttons, which when clicked will spawn another sidebar to slide out from its left edge. One of these “secondary sidebars” contains a google JS map, and sliding that one out works fine.

Another one contains discussion with comments regarding the resource the right sidebar is showing. These discussions are filled using the template plugin and the code for filling the container is called before .toggle() is called.

While the container is sliding out the container (which has background color #eee) is not “spanning over its children in height.” I’m seeing a box of perhaps 500×40 pixels with the correct background color, and the children of this container are shown as if their markup was outside the container.

Upon animation completion the container is stretched vertically to span over all its children and all is good. Unfortunately I cannot give anyone a link to a living example of this code, so what I am asking for is suggestions as to how I can start looking for the problem. This could be anything, but my guess is that it’s jquery ui’s fault.

important:
JQuery-UI’s .slideToggle() does not reproduce this error, not does .fadeIn() or .toggle(). Unfortunately .slideToggle() does not take a direction parameter.

Thanks

Answer 1

check for floats, make suring your clearning them inside the sliding div, just before it, and just after it.

Add the following after a floated element(s) (divs with float:left or float:right)

Most people have a css class called “clear” or “clr”

.clr {clear:both;}

So then you can do

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

It reads slightly better as you may use them alot in future 🙂