时间戳

首页 > 解决方案 > React - Material 框架中根据页面位置弹出下拉列表

css - React - Material 框架中根据页面位置弹出下拉列表

问题描述

我是 React 的新手。我的任务是为iPad和iPad Pro窗口提供移动响应。

当我选择菜单项中的最后一个元素时，如果再次单击下拉菜单，它将按标题隐藏第一个元素。即使我滚动它也不会出现

隐藏第一个元素

如果我单击第一个元素并再次单击菜单项，则如下所示

选择的第一个元素

我需要根据单击的下拉菜单的位置以及下拉选择菜单的顶部或底部来显示菜单项

要查看所有菜单项，我还需要添加滚动。（仅显示四个 iem 就足够了，其他元素可以通过使用滚动访问）

#menu-{

    .MuiPopover-paper {
        max-height: 210px;


          @media screen and (max-width:768px){

             margin-top: 45px;

         

          }
      @media screen and (min-width:992px) and (max-width:1025px) {

        max-height: 200px;

        margin-top: 50px;
      }
    }

   }
}

#menu -默认ID

#menu z-index=1300;

header z-index-9999

我使用 max-height:200px 将下拉列表设为滚动

Material Native 我使用了 Material Native 选择下拉菜单来解决这个问题

但是当我检查移动响应宽度为 768px、1024px 时，menuitem 如下所示，我没有为此使用任何 css

菜单项列表

我需要将此菜单项列表宽度设置为下拉宽度的大小

标签： cssreactjsmaterial-uireact-material

解决方案

推荐阅读