Material: md-fab-speed-dial open

[emps]

md-fab-speed-dial is always open at the first time when dom loaded, needs double click to close it

[ghost]

Use md-scale and md-open="false".

[emps]

thanks for the replay but not much helpin problem still there and i tried that md-open="false" befor

im on master

[ghost]

Show your code :-)

[tobiassteenweg]

I can confirm this issue with the latest 1.0.1 version

[EladBezalel]

Please provide a codepen so we can investigate more

[emps]

normal code from the example

[andrekampert]

Adding ng-cloak to the container fixed it for me

<div class="lock-size" layout="row" layout-align="center center" ng-cloak>
  <md-fab-speed-dial md-open="false" md-direction="left"
                     class="md-fling">
    <md-fab-trigger>
      <md-button aria-label="menu" class="md-fab md-warn">
        <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
      </md-button>
    </md-fab-trigger>
    <md-fab-actions>
      <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
        <md-icon md-svg-src="img/icons/twitter.svg" aria-label="Twitter"></md-icon>
      </md-button>
      <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
        <md-icon md-svg-src="img/icons/facebook.svg" aria-label="Facebook"></md-icon>
      </md-button>
      <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
        <md-icon md-svg-src="img/icons/hangout.svg" aria-label="Google Hangout"></md-icon>
      </md-button>
    </md-fab-actions>
  </md-fab-speed-dial>
</div>

[eugene2005]

I can confirm this is the issue. To reproduce just remove ng-cloak in the example code for the parent container.
md-fab-speed-dial appearance should not be related to ng-cloack

[emps]

@andrekampert thanks i will use that ng-cloak till fix comes i have ng-cloak at body i was sure it takes care of all tree elements

[appelgriebsch]

doesn't work (also the workaround with ng-cloak) if used with ui-router...:

.state('view', {
            url: '/view',
            views: {
             [...]
            'actions@app': {
                templateUrl: `${moduleConfig.path}/views/todo.actions.html`
              }
[...]

in todo.actions.html:

<div class="lock-size" layout="row" layout-align="center center" ng-cloak>
  <md-fab-speed-dial md-open="fabOpen" md-direction="up" class="md-fling">
  [...]
</div>

FAB is always opened :(. Was working with 0.11.4. Currently blocking point for me to migrate to 1.0.x. The whole sample can be found here (still with 0.11.4): https://github.com/appelgriebsch/electron-boilerplate/tree/angularjs

[emps]

try use ng-cloak with md-fab-speed-dial element and add class md-scale isntead of md-fling with mine it works also take off that md-open is not working any way

[appelgriebsch]

@emps ok, doing like so:

<md-fab-speed-dial class="md-scale" md-direction="up" ng-cloak>
[...]

closes the speed dial, but it won't open up (even when clicked) :(

[nawrasg]

@andrekampert adding ng-cloak for the container or for the fab itself fixes the problem :+1:

[topherfangio]

Duplicate of #6111 which we are working to address.

[objecteer]

After investigation, I suspected that the problem was from jqLite. So, I added JQuery to my page and the problem was solved.

[Darksoulsong]

1.0.8 version and this is still happening. It seems that the aria-hidden attr from mb-fab-actions is toggling as expected, and the same goes to the classes (md-is-open is applied to the mb-fab-speed-dial element), but the action buttons are always visible.

I tried the ng-cloak fix, and changed from fling to scale, no success.

[abinthomasonline]

I tried the ng-cloak with md-scale fix successfully...

It works perfectly even if i remove ng-cloak with md-scale.. :)

[recursionbane]

I'm still seeing this issue in 1.1.0-rc5, with ng-cloak and with either md-scale or md-fling.
I'm using the same code as the example, but I'm unable to ever close the FAB speed dial.

FIX: I was able to fix it by specifying ng-class="someVariable" and then setting someVariable='md-fling' in the controller. Setting ng-class="md-fling" directly in the view does not work.

This does NOT work: http://codepen.io/recursionbane/pen/OXkPAK
This works: http://codepen.io/recursionbane/pen/BzxyrB

[EladBezalel]

@recursionbane please file a new issue about it and we will re-investigate, thanks!

[sbaechler]

@recursionbane ng-class has to be a string. Your example works if you change it to ng-class="'md-fling'" or class="md-fling".

[sbaechler]

I still have the issue that the component does not work when used with ui-router (and jspm). It looks like the animations are not bound correctly.

The function MdFabSpeedDialScaleAnimation never gets called.

I am using material-ui 1.1.0.

My fix is to write the necessary CSS by hand:

.md-scale.md-is-open .md-fab-action-item {
  transform: scale(1);
}