md-fab-speed-dial with fab action buttons hidden, get in front of other elements on the page

[fjnogueira]

when include a fab speed dial, it obstructs access to elements (when hidden), a possible hack might be changing the z-index of the hidden fab action buttons when hidden

[topherfangio]

Duplicate of #4259. Should be closed when #4847 is merged.

[auty]

@topherfangio I'm still encountering this issue using v0.11.4. @fjnogueira Have you been able to confirm the fix using v0.11.4?

[topherfangio]

@auty Can you provide a Codepen? Also, what browser are you using?

[auty]

@topherfangio Here's the Codepen http://codepen.io/auty/pen/Vvrarm/. It appears the placement of the id attribute is causing the issue. Having "id='FAB'" in the div causes the issue seen above. Moving "id='FAB'" to the element resolves the issue.

[topherfangio]

@auty Ah, indeed. The speed dial achieves the proper effect using the CSS property pointer-events: none. So, if you wrap it in another <div>, you'll need to add it there as well.

That said, the FAB buttons have a md-fab-bottom-right class that you can apply which will do the positioning you want without the extra wrapper. You just need to make sure it is a sibling to the scrollable content, and whatever wraps both of those has to have position: relative.

Here is an example of what I mean: http://codepen.io/topherfangio/pen/gaXxva

[auty]

@topherfangio Thanks! I really appreciate the thorough explanation.