Material-UI-Popover – Position auf kleinem Bildschirm ⇐ CSS

[Anonymous]

Ich versuche schon seit einiger Zeit, eine Möglichkeit zu finden, Material-UI-Popover unter meinem Anker zu positionieren und es auch auf kleineren Bildschirmen immer so zu belassen.
Hier ist ein Sandbox-Beispiel.
Das ist das Beste, was ich bekommen habe, aber die Schriftrolle befindet sich zu diesem Zeitpunkt nicht wirklich auf dem Körper, sondern auf dem Popover-Container-Div, und das hilft mir nicht.
Nur zur Erklärung: Ich weiß, dass ich es verwenden kann AnchorElement mit Position, aber auf kleineren Bildschirmen verbirgt das Popover einfach den Anker. Ich möchte, dass sich das Popover immer darunter befindet und nur den Körper scrollen lässt, damit ich den gesamten Popover-Inhalt sehen kann, wenn ich nach unten scrolle.

Code: Select all

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 (



Open Popover with anchor

id="popover-with-anchor"
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
Popover content.



);
}

Bilder zum Beispiel. Wenn das Popover größer als der Bildschirm ist, passt es sich in den Bildschirm ein und geht über den Anker


statt unter dem Anker zu sein