-
Notifications
You must be signed in to change notification settings - Fork 3.4k
md-fab-speed-dial showing actions when isOpen is false. #6111
Comments
Found that |
Due to an animation issue, the FAB Speed Dial started in an open state when using the `md-fling` animation. Fix by delaying the initial animation until after the component was fully rendered so that the animation's calculations were correct and adding some CSS to ensure the first animation fired instantly. Fixes #6111.
Due to an animation issue, the FAB Speed Dial started in an open state when using the `md-fling` animation. Fix by delaying the initial animation until after the component was fully rendered so that the animation's calculations were correct and adding some CSS to ensure the first animation fired instantly. Fixes #6111.
Due to an animation issue, the FAB Speed Dial started in an open state when using the `md-fling` animation. Fix by delaying the initial animation until after the component was fully rendered so that the animation's calculations were correct and adding some CSS to ensure the first animation fired instantly. Fixes #6111.
@topherfangio This is still broken in 1.0.0(and master) if you run it locally(might have to be outside of the docs demo too). Also can't really workaround it by using |
Finally figured it out. fabSpeedDial will start out visible if not enclosed with an ng-cloak (either on the md-fab-speed-dial itself or an enclosing ancestor element.) To repro:
At this point, the speed dial will start open. |
md-flying in final version 1.0.0 is still broken |
@trevorade Thanks for the update; you are indeed correct about The base issue here is that with just HTML/CSS, the speed dial uses flex positioning and is thus open "by default". We use JS animations to close it, but those don't always seem to fire as expected. The real solution would be to rewrite it using absolute positioning where the elements start out overlapping/hidden and use the JS animations to reposition it to be open, but I think this may be too big of a change for a 1.0.1, so I'll try to find a different workaround. In the meantime, can you test adding the |
@topherfangio I just tested Adding With With |
@topherfangio just did. It fixed it! |
@johnsheldon Can you provide a Codepen so that I can play around and try to find a quick workaround and then a more robust fix? |
Thanks for the demo; I definitely see the issue. |
+1 |
+1 spent an entire day trying to debug this. Should have just checked. T.T |
I think the problem was from jqLite. So, I added JQuery to my main page and the problem was solved. |
@objecteer i have the full version of jquery, also. Without the ng-cloak its still broke. |
There is currently a need to use `ng-cloak` on the parent container of the speed dial. Add a "Troubleshooting" section to the documentation which notes this issue. Fixes angular#6111.
@ThomasBurleson out of curiosity, how do you guys keep track of items where there are plans to fix stuff if you close the issue? |
@topherfangio no worries. I thought that maybe you guys had some other workflow other than github issues. If you did, then maybe there's something I can learn from it. |
+1 on that guys! |
yep, +1 too! |
EDIT FROM CORE TEAM: This issue has been locked, please refer to #6788 and #6789 as we split it into two issues.
The current screenshot is from the latest material angular website.
I can see in the code that
this.isOpen=false
but the actions are visible and when we click on button, only after that it triggers the show and hide functionality.However, in the bottom example it seems to work fine, don't know why ?
Can anyone elaborate on this how to hide on initial load the actions behind the big icon button.
The text was updated successfully, but these errors were encountered: