javascript - Is it possible to align MUI Snackbar relative to its parent div, rather than to relative to the entire page - Stack

admin管理员组

文章数量:1326071

I am using a bination of Material UI's Snackbar & Alert ponents to display Success or Error messages following a database Post action. Standard Material UI allows positioning of that message relative to the page using the anchorOrigin prop, which I have used to align the message centrally at the bottom of the page in the following code:

<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}         
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
    }}>

    <Alert
        severity={severity}
        variant="filled"
        sx={{ width: '100%' }}
        >
        {message}
    </Alert>
</Snackbar>

Rather than aligning to the overall page though, I would like to align the alert centrally relative to the parent div which contains the code which triggers the message. Is there a way to do this? I was looking at Material UI's custom sx prop to see if there was a way this could be used in my scenario, but couldn't see anything helpful.

I am using a bination of Material UI's Snackbar & Alert ponents to display Success or Error messages following a database Post action. Standard Material UI allows positioning of that message relative to the page using the anchorOrigin prop, which I have used to align the message centrally at the bottom of the page in the following code:

<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}         
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
    }}>

    <Alert
        severity={severity}
        variant="filled"
        sx={{ width: '100%' }}
        >
        {message}
    </Alert>
</Snackbar>

Rather than aligning to the overall page though, I would like to align the alert centrally relative to the parent div which contains the code which triggers the message. Is there a way to do this? I was looking at Material UI's custom sx prop to see if there was a way this could be used in my scenario, but couldn't see anything helpful.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Feb 7, 2023 at 10:27 Jess asked Feb 7, 2023 at 9:58 JessJess 21122 silver badges1818 bronze badges 2

• What do you want to happen when user scrolls? To move the snack bar with the scrolled screen, or should it stay at it's fixed position like the MUI default behavior? – Hamed Siaban Commented Feb 7, 2023 at 21:15
• @Hamed Siaban The div that I want it in doesn;t have horizontal scroll. It does resize depending on the users screen resolution - in that case the snackbar should remain central in the resized div. The scenario is that I have a menu on the left of the page taking up perhaps 15% of the screen horizontally, and a data submission form on the right side (in a div) taking up the remaining 85% of the screen. I want the snackbar to be positioned centrally within the right div under the data submission form. – Jess Commented Feb 8, 2023 at 11:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

SnackBar's default position attribute is fixed.

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

We need to change that to absolute.

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

So we also need to make a parent positioned div for our snack bar to work as we expect. An example of positioned div can be a position: relative div.

<Box //This would be your resized div on the right side of page
  sx={{
    width: "500px",
    height: "500px",
    position: "relative",
  }}
>
  <Snackbar
    open={true}
    autoHideDuration={5000}
    onClose={handleClose}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "center",
    }}
    sx={{ position: "absolute" }}
  >
    <Alert severity={"success"} variant="filled" sx={{ width: "100%" }}>
      {"message"}
    </Alert>
  </Snackbar>
</Box>

To learn more about positions read this

I found another way to solve this by setting the sx value for top and bottom to be more or less based on the anchorOrigin.vertical setting.

<Snackbar
  open={open}
  message={message}
  autoHideDuration={autoHideDurationDefault}
  onClick={onClick}
  onClose={onClick}
  anchorOrigin={anchorOrigin}
  // move further from top/bottom of the screen
  sx={anchorOrigin.vertical === "top" ? { top: "60px" } : { bottom: "60px" }}
>
  <Alert onClose={onClick} severity={severity} variant="filled">
    <Typography>{message}</Typography>
  </Alert>
</Snackbar>

本文标签：