Anchor 'center' not working on screens under 960px

[jtraaraujo]

Anchor 'center' should center the snackbar, but it doesn't in smaller screens.
EDIT: Screens between 600 and 960px ('sm' right?)

Expected Behavior

Center the Snackbar

Current Behavior

Stays on the left of the screen (top or bottom) - tested on Chrome and Firefox

Steps to Reproduce

Just go to the examples page: https://iamhosseindhv.com/notistack/demos#material-props and try centered snackbars (top or bottom)

First time I post a bug in GitHub so I hope it's good enough :)

Thanks

[iamhosseindhv]

Thanks @jtraaraujo . ❤️
This is intentional. Notistack tries to replicate Material-UI snackbars and they try to follow material specifications.

Although I'm not sure if this is explicitly specified in material design, I think it's a good design decision.

[jtraaraujo]

Hi @iamhosseindhv ! Thanks for your reply!

I did check on Material UI website and they don't force the Snackbar to the left in 'sm' screens (600 to 960px).

Tested here: https://material-ui.com/components/snackbars/#positioned-snackbars
Don't forget we are talking about centered Snackbars (top or bottom)

Also, Material specifications explicitly say:
Avoid placing snackbars flushed to one edge of the layout.
(https://material.io/components/snackbars/#placement)

So I guess if you're following Material UI's approach, the Snackbar should stay centered.

Thanks!

[piehouserat]

I also ran into this today, I think notistack should not differ in behaviour to how things work in material ui as it threw me for a while until i realised this was by design

[oliviertassinari]

@piehouserat Make sure you are using the latest version. I suspect it was solved. Do you have a reproduction?

[piehouserat]

I just installed it today, package.json shows 0.9.7 which is the latest version on npm, a reproduction of the problem can actually be produced on the notistack website by going to https://iamhosseindhv.com/notistack/demos#material-props setting the horizontal anchor origin to center and adjusting the viewport to less than 960px

have added some extra jss to fix the problem for now but hopefully this can be removed soon when fixed

[oliviertassinari]

Ah right, thanks for the detailed step. Well, It does sound like a small bug :).

[lucasturci]

Hello guys, got this same problem today. It seems like the bug wasn't solved yet. Any updates?
@piehouserat , can you share the JSS you used to fix as a workaround?

[iamhosseindhv]

The problem you're facing @lucasturci is #367 which has been fixed in the latest version (1.0.6).