Action buttons collapse when hovering in between each one about fab-speed-dial HOT 4 CLOSED

For anyone still wanting hover functionality, I found that this style was causing the jitter between actions:

eco-fab-speed-dial .eco-fab-speed-dial-container eco-fab-speed-dial-actions {
    display: flex;
    position: absolute;
    height: 0;
    width: 0;
}

In my case, I just override the position, width and height and that seems to solve the issue.

I made a SCSS mixin I just attach to the top-level element:

@mixin eco-fab-speed-dial-hover-fix() {
  ::ng-deep .eco-fab-speed-dial-container eco-fab-speed-dial-actions {
    position: initial;
    height: initial;
    width: initial;
  }
}

eco-fab-speed-dial {
  @include eco-fab-speed-dial-hover-fix();
}

Or just as a global override:

eco-fab-speed-dial .eco-fab-speed-dial-container eco-fab-speed-dial-actions {
  position: initial !important;
  height: initial !important;
  width: initial !important;
}

Hopefully this helps.

from fab-speed-dial.

This is correct and is easily reproduced on the demo page.

However this is not something we use, and don't plan to fix it ourselves. So feel free to submit a PR if you want to see it fixed. In the meantime I suggest you to consider not using hover as it is not mobile friendly anyway.

from fab-speed-dial.

As a matter of fact I was considering dropping support for hover entirely, as I cannot see anything related to hover in the specs and it can never be very mobile friendly.

from fab-speed-dial.

OK. No problem. Will put it on the todo list

from fab-speed-dial.