Материал пользовательского интерфейса Попвер - позиция на маленьком экране ⇐ CSS

[Anonymous]

Я в течение некоторого времени пытался найти способ позиционировать материал пользовательского интерфейса под моим якорем и оставлять его таким, что всегда даже на более мелких экранах.
Вот пример песочницы. /> Просто чтобы объяснить, я знаю, что могу использовать Anchorelement с положением, но на меньших экранах Popover просто скрывает якорь , я бы хотел, чтобы Popover всегда находился под ним, и просто заставил кузов, так что я могу видеть полное содержание Popover, когда я прокручивал вниз.
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.



);
}
< /code>
Например, изображения. Когда поповер больше экрана, он подходит на экране, и перейдите по якору

вместо описания
alte. src = "https://i.sstatic.net/fhh13.png"/>

Подробнее здесь: https://stackoverflow.com/questions/614 ... all-screen