Snackbar props not honored on smaller screens

[rzmz]

I think a screenshot of notistack documentation website will best describe the problem:

The notification appears to the left of the screen, instead should be in center as selected.

[raulgg]

I've noticed this issue as well. It seems to be a CSS problem, you can add a class to the providers configuration to bypass this issue.

For the case in your screenshot I would do the following:

const useStyles = makeStyles((theme) => ({
  containerTopOffset: {
    display: "flex",
    alignItems: "center",
  }
}));

<SnackbarProvider
  maxSnack={3}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  classes={{
    anchorOriginBottomCenter: classes.containerBottomCenter
  }}
>
  <MyApp />
</SnackbarProvider>

[rzmz]

Thanks! Will try that.

[iamhosseindhv]

I noticed this issue and the fix will be published soon. In the meantime, it's the wrapperInner element of Collapse that you need to customise.

const useStyles = makeStyles((theme) => ({
  container: {
    [theme.breakpoints.down('xs')]: {
      '& .MuiCollapse-container, .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner': {
         width: "100%" // occupy full-width on xs screens
      }
    }
 },
}));


const classes = useStyles();
return (
<SnackbarProvider
  maxSnack={3}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  classes={{
    containerRoot: classes.container
  }}
>
  <MyApp />
</SnackbarProvider>
)

[rzmz]

I unfortunately had no luck with neither of those solutions at first but when I changed
anchorOriginBottomCenter: classes.containerBottomCenter
to point to correct classname containerTopOffset, solution by @raulgg works! Thanks!

[dmastrorillo]

I noticed this issue and the fix will be published soon. In the meantime, it's the wrapperInner element of Collapse that you need to customise.

const useStyles = makeStyles((theme) => ({
  container: {
    [theme.breakpoints.down('xs')]: {
        '& > .MuiCollapse-container > .MuiCollapse-wrapper  > .MuiCollapse-wrapperInner ​': {
           width: '100%',  // occupy full-width on xs screens
        },
    }
 },
}));


const classes = useStyles();
return (
<SnackbarProvider
  maxSnack={3}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  classes={{
    containerRoot: classes.container
  }}
>
  <MyApp />
</SnackbarProvider>
)

This didn't work for me at first. However after a minor modification it is now working! Thanks for that!

const useStyles = makeStyles((theme) => ({
  container: {
    [theme.breakpoints.down("xs")]: {
      "& .MuiCollapse-container, .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner": {
        width: "100%" // occupy full-width on xs screens
      }
    }
  }
}));

[aeharding]

Here's my hotfix (note: only for 100% 📱 projects, 🚫 🖥):

  .MuiCollapse-wrapperInner {
    // notistack broke mobile snackbar widths
    // remove once fixed: https://github.com/iamhosseindhv/notistack/issues/367
    width: 100% !important;
  }

[iamhosseindhv]

This is fixed in the latest release v1.0.6. I'd appreciate if one of you could confirm.

[dmastrorillo]

@iamhosseindhv I just tested on mine and I am getting the same problem :(

I just had a look through the inspector and I can see width:100% being set however it is overwritten to width:"auto" by the className .SnackbarItem-collapseWrapperInner-63

[JanderSilv]

I guess the problem was solved on v.1.0.6.

Before:

Now on v.1.0.6:

[aeharding]

I also confirm 1.0.6 is working for me.