Floating Action Button with Menu Ink Ripple Effect does not stay within button boundaries.

[HappyZombies]

See http://propeller.in/components/floating-button.php all the way at the bottom.

At first I thought it was that maybe the sample was implemented wrong, but when I ran it on my own site the ripple effect goes way over the boundaries. I'm not sure if this is suppose to happen or if it's part of the design.....because all the other ripple effects stay within their button boundaries.

See picture: http://imgur.com/E5aWne8

[sunil-digicorp]

Thank you for bringing this to our notice. Ideally ripple effect should not be there in the FAB button but somehow it remained in our code.

We are sorry for that. Please remove "pmd-ripple-effect" class from the button code.

Still if you need the ripple effect in your button element, here is the fix:

$(".pmd-floating-action-btn.pmd-ripple-effect").on('mousedown touchstart', function() {
    $(this).css('overflow', 'hidden');
    setTimeout(function(){ 
        $(".pmd-floating-action-btn.pmd-ripple-effect").removeAttr("style");
    }, 500);
})

Add above function in your template.

Hope this will help.

[niklr]

I actually like the ripple effect in the Floating Action Button (FAB). However, the mouse location is not used as starting point in some cases.

See GIF: https://i.imgur.com/cLwD61t.gifv

Do you still recommend not using the ripple effect on FAB buttons?