Ecodev/fab-speed-dial

Action buttons collapse when hovering in between each one

mattbizley-bds opened this issue · 4 comments

mattbizley-bds commented

Repro:

  • hover over the trigger button to expand the actions buttons
  • move mouse into the space between action buttons
  • menu collapses

Menu should remain open unless move outside of an actions container

PowerKiKi commented

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.

PowerKiKi commented

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.

mattbizley-bds commented

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

adam-snyder commented

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.

  • 👍1