The hover circle on material md-icon button is off when using fx-show / hide

[geelus]

When using fx-show / hide in a md-icon-button, the hover circle is a few pixels off. Here's a screenshot:

[ThomasBurleson]

Issues are considered invalid without a working Plunkr or CodePen demo.

---

Also here are some important guidelines for investigating a Layout issue:

• The Layout API is case-sensitive
  • fxlayout is not valid
  • fxLayout is valid
• If you cannot get Flex-Layout to work with an example, try to manually use CSS flexbox stylings. If that still does not work to achieve your goals, then Flex-Layout is not the issue.
• If hand-crafted CSS resolves the issue, but Flex-Layout does not then we definitely have a bug in this repository.

---

Templates

• Plunkr Template
• Plunkr Template with Material2

[geelus]

Here is the plunker:
https://plnkr.co/edit/P7Faj908RgiY84Ih3ivQ?p=preview

[ThomasBurleson]

@geelus - wonderful. we will investigate.

[joshwiens]

I actually just ran into this myself, looking into what's stepping on the circle now.

[geelus]

I fixed it by wrapping my button in a div and then applying the fxShow/fxHide to the div.

[joshwiens]

@geelus - The difference between md-icon-button with / without fxShow is the height & width on md-button-wrapper

• Without fxShow height & width are set to auto ( in the demo that's 40x40 ) and the icon is properly aligned.

• With fxShow height & width are set to pixel values ( in the demo that's 23.9931x40 ) and the icon is left justified.

While wrapping the element in a <div> is a viable workaround, we shouldn't be stepping on element styles :)

[ThomasBurleson]

@d3viant0ne - fxShow/fxHide simply set the display to none or flex.
I am not sure how that would change the px values from auto to px values.

[joshwiens]

@ThomasBurleson - It's fxShow changing display on md-icon-button from inline-block to flex that results in md-button-wrapper getting tweaked.

As you would expect, adding justify-content: center; to md-icon-button results in the proper alignment regardless of what width ends up being computed for md-button-wrapper.

By default, it's applying the default for justify-content thus we have a left aligned icon.

That brings up the question, is this really an issue with flex-layout or should md-icon-button be modified to properly justify it's icon? In the case of the icon button, I can't think of a reason why adding justify-content: center; would be benign for any other display value other then flex

Also worth noting the scope of this goes beyond just md-icon-button as initially reported. The above is applicable to any md-button.

//cc @jelbourn

[ThomasBurleson]

The fxHide and fxShow should not change the display mode to 'flex'. Instead the display mode (when not 'none') should be the default (=== 'block') or the explicitly assigned display mode for that element.

@see https://github.com/angular/flex-layout/pull/121/files#diff-3600d4c60f78022f7136ec3b187f680dR126

[ThomasBurleson]

@geelus, @d3viant0ne - see PR #121.

with these changes, the following works as expected:

<button md-icon-button [fxShow]="isVisible">
   <md-icon>menu</md-icon>
</button>

[geelus]

@ThomasBurleson It doesn't seem to have been fixed in beta 3 or at least doesn't work for me. Can you please have this plunker working?
https://plnkr.co/edit/P7Faj908RgiY84Ih3ivQ?p=preview

[ThomasBurleson]

@geelus - please note that the fixes are in a Pull Request that have NOT been merged nor released: #121

[geelus]

@ThomasBurleson Thanks for clarification. So I'll check next version (beta 4)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}