Fab actions overlap page controls

[michael-capner]

I'm really enjoying the Fab speed dial component, but I noticed an issue when I added a couple fab actions. The actions overlapped other controls on my page, which made the other controls no longer clickable.

I am using the top animated configuration and I noticed when the buttons in the smd-fab-actions are displayed for the first time when the trigger is clicked, the smd-fab-speed-dial control permanently takes the space up. This in essense causes the smd-fab-speed-dial div to cover the other controls on the page preventing them from being clicked.

I'd like to propose the smd-fab-speed-dial shrinks back down to the original height each time the smb-fab-actions "disappear".

I was able to recreate this in the demo app, by modifying the heights of the "Click me!!" example. The toggle control was not clickable after the "+" action is triggered causing the three actions to rise up and over the toggle control.

Please let me know if I am missing something and can resolve this myself.

Thank you.

[mist3r3]

I have the same issue, it seems that since the actions are in a box and still showing, I believe you can fix that with an ngIf for norw...

[michael-capner]

Hi mist3r3, thank you for your suggestion. How would you implement this with ngIf? I tried an approach with surrounding smb-fab-actions with ngIf, but I only received an error as smb-fab-speed-dial is unable to locate the smb-fab-actions. Can you provide an example which worked for you?

Thank you

[mist3r3]

Hi, I have a solution but it hides the animation that makes appear the buttons. I'm trying to find something else.