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.

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

[help] How can I make new snackbar always appears at the start position instead of at the rear? #578

Open
Paper-Folding opened this issue Aug 25, 2023 · 2 comments

Comments

@Paper-Folding
Copy link

Paper-Folding commented Aug 25, 2023

I noticed that new snackbar appears at the rear of the stack, how can I make new snackbar always appears at the beginning position?
For example, if setting up snackbar at left bottom position, how can I make new snackbar appears the very bottom of all snackbars rather than at the top?

@Paper-Folding
Copy link
Author

Paper-Folding commented Aug 25, 2023

For example, it should behave just like this one I used before: https://paper-folding.github.io/toastify/ .

@TimonPeng
Copy link

notistack-SnackbarContainer has style flex-direction: column-reverse by default.

Add a new class name snackbar-container:

<SnackbarProvider
  classes={{ containerRoot: "snackbar-container" }}
  anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
  maxSnack={Infinity}
>
  <Component {...pageProps} />
</SnackbarProvider>

Set css for snackbar-container or use default class name notistack-SnackbarContainer.

.snackbar-container {
  flex-direction: column;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants