jQuery ui-effects-wrapper is chopping off the bottom of a divs content whilst using .show("slide",

I am using

 $('#account-slide'开发者_如何学Go).show("slide", {direction: "right"}, 1000);

to display a div when a button is clicked.

The problem is the ui-effects-wrapper class that is applied to the div when the button is clicked cuts of the div whilst it is moving.

Once the div reaches it's destination the div returns to it's normal state and you can see it in it's entirety.

Any ideas why the ui-effects-wrapper class would be causing this?

Thanks for your help.

I had a very similar issue where as the element would slide in and the element would be clipped on the bottom because of a height defined by jQuery directly to the animated element during the animation (in my case 28px).

There are two ways you can go about fixing this that I've found --

1. Set an explicit height to the wrapper div, then set the inner div (or element) to have a height of height: 100% !important;

2. Set an explicit height to the actual element, as specific as possible in the css, by doing height: 32px !important;

Thanks for your solution Max, mine is a bit of a refinement for my particular case based on your initial conclusion.

Ok, in the end I just needed to ensure everything contained within the div I wanted to slide was set to height: 100%

This is because the ui-effects-wrapper doesn't seem to like auto heights whilst sliding a containing div.