I have been grappling with finding a solution to position the material ui popover beneath my anchor consistently, even on smaller screens.
Take a look at this sandbox example.
The current setup is working alright, but the issue is that the scroll is contained within the popover container div, which isn't ideal for me.
To elaborate, I understand that I can use AnchorElement with positioning, but on smaller screens, the popover ends up covering the Anchor. I actually want the popover to always be positioned below it and allow the body to scroll, displaying the full content of the popover when scrolling down.
import React from "react";
import {makeStyles,MuiThemeProvider,createMuiTheme} from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Button from "@material-ui/core/Button";
export default function SimplePopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const theme2 = createMuiTheme({
overrides: {
MuiButton: {
root: {
top: 400
}
},
MuiPopover: {
root: {
},
paper: {
height: 500
}
}
}
});
return (
<div>
<MuiThemeProvider theme={theme2}>
<Button
variant="contained"
color="primary"
onClick={handleClick}
>
Open Popover with anchor
</Button>
<Popover
id="popover-with-anchor"
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
Popover content.
</Popover>
</MuiThemeProvider>
</div>
);
}
Images provided as an example. When the popover exceeds the screen size, it adjusts itself within the screen and overlaps the anchor
https://i.stack.imgur.com/CT9hE.png
instead of being positioned underneath the anchor