Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fab] Badge leaks over Floating Action Button #30603

Closed
2 tasks done
mmacu opened this issue Jan 13, 2022 · 3 comments · Fixed by #30842
Closed
2 tasks done

[Fab] Badge leaks over Floating Action Button #30603

mmacu opened this issue Jan 13, 2022 · 3 comments · Fixed by #30842
Labels
bug 🐛 Something doesn't work component: Fab The React component.

Comments

@mmacu
Copy link
Contributor

mmacu commented Jan 13, 2022 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Badge component leaks over Fab component despite being defined earlier in DOM.

image

Expected behavior 🤔

Badge component should hide behind Fab component.

Steps to reproduce 🕹

Here is live example: https://codesandbox.io/s/youthful-mccarthy-c7p15?file=/src/App.js

Context 🔦

I've have similar layout on my website and noticed this visual bug.
@mmacu mmacu added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 13, 2022
@michaldudak
Copy link
Member

It seems that the Fab is missing the z-index (while the Badge has z-index: 1). We need to be careful not to break any existing layouts though.

Would you like to work on a fix?

@michaldudak michaldudak added bug 🐛 Something doesn't work component: Fab The React component. and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 14, 2022
@michaldudak michaldudak changed the title Badge leaks over Floating Action Button [Fab] Badge leaks over Floating Action Button Jan 14, 2022
@mmacu
Copy link
Contributor Author

mmacu commented Jan 14, 2022

@michaldudak Yes. I can work on a fix.

@mmacu mmacu mentioned this issue Jan 14, 2022
Closed
@mmacu
Copy link
Contributor Author

mmacu commented Jan 14, 2022

I've added pull request.

@mnajdova mnajdova mentioned this issue Jan 31, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: Fab The React component.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Fab] Add z-index issamElmohadeb098/material-ui
2 participants
@michaldudak @mmacu