Material-ui: [Snackbar] Position problem when using with rc-queue-anim

Created on 20 Jul 2018 · 5Comments · Source: mui-org/material-ui

When using Snackbar with rc-queue-anim, Snackbar positions go wrong
Instead position relative to <body>, it positions relative to rc-queue-anim container

Online demo: https://codesandbox.io/s/5xql2nwzzx
(Demo code is based on v1.4.0 https://material-ui.com/demos/snackbars/, the only file changed is index.js )

Ant Design - Message does the same job like Snackbar, it works fine, its approach is to attach the message / snackbar to the <body>

[x] This is a v1.x issue.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Snackbar position should be position relative to <body>

Current Behavior

Snackbar positions relative to the rc-queue-anim container

Steps to Reproduce

Online demo: https://codesandbox.io/s/5xql2nwzzx
(Demo code is based on v1.4.0 https://material-ui.com/demos/snackbars/, the only file changed is index.js )

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.4.0 |
| React | v16.4.1 |
| browser | Chrome |
| etc. | |

Snackbar question

Source

gudh

Most helpful comment

We don't bake the portal directly into the snackbar as it works pretty well without in 90% of the cases.
Most people should be mounting a single snackbar in the page. It's intended to be used with a global notification system.

You can use the Portal component for this use case: https://codesandbox.io/s/04y3vykw0p.

import Portal from "@material-ui/core/Portal";

// ...

        <Portal>
          <Snackbar
            anchorOrigin={{ vertical, horizontal }}
            open={open}
            onClose={this.handleClose}
            ContentProps={{
              "aria-describedby": "message-id"
            }}
            message={<span id="message-id">I love snacks</span>}
          />
        </Portal>

oliviertassinari on 20 Jul 2018

🎉4 👍4 ❤3

All 5 comments

You can use the Portal component for this use case: https://codesandbox.io/s/04y3vykw0p.

import Portal from "@material-ui/core/Portal";

// ...

        <Portal>
          <Snackbar
            anchorOrigin={{ vertical, horizontal }}
            open={open}
            onClose={this.handleClose}
            ContentProps={{
              "aria-describedby": "message-id"
            }}
            message={<span id="message-id">I love snacks</span>}
          />
        </Portal>

oliviertassinari on 20 Jul 2018

🎉4 👍4 ❤3

Hi @oliviertassinari, thanks for the fast response!

I wonder why don't we position the snackbar relative to <body> like Ant Design - Message does?

Btw, really love material-ui!

gudh on 20 Jul 2018

I wonder why don't we position the snackbar relative to like Ant Design - Message does?

@gudh we do, but the transform: translate(0px, 0px); style is creating a rendering layer that absolute positioning can't escape.

oliviertassinari on 20 Jul 2018

People using the snackbar inside a modal & dialog with experience the same issue. https://github.com/mui-org/material-ui/issues/12201#issuecomment-406434406 covers this use case too.

oliviertassinari on 2 Aug 2018

Thank you! All works with Portal.