Fx.Slide does not work if any of the contained elements have margin set

[richard.ward@…]

I am using the Fx.Slide method and it works a treat provided that you do not have the css property margin set on any of the child elements. For example:

<span id="togglebutton">Click for effect</span>
<div id="divtoslide" style="width:200px;">
    <a href="location.html" style="width:100%">Go somewhere 1</a>
    <a href="location.html" style="width:100%">Go somewhere 2</a>
    <a href="location.html" style="width:100%">Go somewhere 3</a>
</div>

The above would work fine. However, the following will not work:

<span id="togglebutton">Click for effect</span>
<div id="divtoslide" style="width:200px;">
    <a href="location.html" style="width:100%;margin:2px">Go somewhere 1</a>
    <a href="location.html" style="width:100%;margin:2px">Go somewhere 2</a>
    <a href="location.html" style="width:100%;margin:2px">Go somewhere 3</a>
</div>

Please note it does not make any difference if the style is placed in the element itself or in <style> tags or a separate css file, I have just done it inline for the purposes of this ticket.

Any ideas why this is a problem and the likelihood of a solution?

[Richard Again!]

I should have said, this is a problem when sliding the div in, it sucessfully slides out (although a few times it hasnt quite all hidden itself). The problem occurs using both toggle and slidein methods when sliding in.

[campbell@…]

I can see this problem too (using FF and Safari - both on Mac):

You can see an example of the problem on the test page here:

http://www.congoblue.com.au/test/sliderToggleTest.html

[campbell@…]

The outer divs (class = testDiv) around each example are just for clarity. The have no bearing on the problem - you can remove them and see the same behaviour.

In the first case, if you make the duration much longer, you can actually see the top most and bottom most margins of the child elements collapsing as the element slides in the first time.

Looking quickly with Firebug, it seems that the height (as seen by the negative margin of the sliding element in the hidden position) is incorrect - it excludes the now collapsed margins. Then when the element slides out, the margins are expanded again causing the element not to appear fully - the height still being the height without the top most and bottom most child element margins.

[campbell@…]

The issue can be worked-around by either by:

Setting padding to anything greater than 0px in the sliding element (in this case, the div, was set to padding: 8px) - which can be seen in the middle test version; or

Setting the top margin of the top child element and the bottom margin of the bottom child element to zero - as in the third example on the test page - but this potentially looks ugly.

[campbell@…]

BTW - I set up the test cases in the original post but they don't seem to actually replicate the problem. They may be found here:

http://www.congoblue.com.au/test/sliderToggleTestOriginal1.html
http://www.congoblue.com.au/test/sliderToggleTestOriginal2.html

[ibolmo]

Moved to 1.3's Effects cleanup/enhancement.

[tomocchino]

should be fixed with new Element.Dimensions.js