Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

This is a v1.x issue.
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.

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

12reactions

oliviertassinaricommented, Jul 30, 2018

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>

0reactions

ratibor81commented, Sep 10, 2018

Thank you! All works with Portal.

Top Results From Across the Web

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

When using Snackbar with rc-queue-anim, Snackbar positions go wrong Instead position relative to , it positions relative to rc-queue-anim ...

Snackbar position wrong when use errorhandler in angular 5 ...

I have solved a issue in the errorhandler using the ngzone module, maybe if you open the snackbar inside the ngzone fix the...

React Snackbar component - Material UI - MUI

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen....

Snackbars - Material Design

Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

Snackbar - Angular Material

The vertical position to place the snack bar. viewContainerRef: ViewContainerRef. The view container that serves as the parent for the snackbar for the...