UI popover - позиция на маленьком экране

Question

В течение некоторого времени я пытался найти способ расположить всплывающее окно пользовательского интерфейса материала под моим якорем и оставить его таким же всегда даже на небольших экранах.

Вот пример песочницы: https://codesandbox.io/s/material-demo-yvcqu?file= / demo. js

Это лучшее, что у меня получилось, но на данный момент свиток находится не на теле, а на контейнере для всплывающих окон div, и это не помогите мне.

Просто чтобы объяснить, что я знаю, что я могу использовать AnchorElement с позицией, но на экранах меньшего размера, поповер просто скрывает Anchor, я бы хотел, чтобы поповер всегда был под ним, и просто сделайте прокрутку тела, чтобы я мог видеть весь всплывающий контент при прокрутке вниз.

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>
  );
}

Изображения, например. Когда поповер больше экрана, он умещается на экране и go выходит за якорь

вместо того, чтобы находиться под якорем

Answer 1

Не делай overflow: scroll на root. Вместо этого выполните overflowY: auto на paper.

См. Коды и поле и поиграйте.

Попробуйте это:

overrides: {
      MuiPopover: {
        root: {
          // overflow: "scroll"
        },
        paper: {
          left: 50,
          top: "500px !important",
          height: 50,
          overflowY: "auto"
        }
      }
    }