梅州文献当接近屏幕边缘时，基本菜单垂直重新对齐，以确保所有菜单项完全可见。这种行为对于我正在编写的响应式页面非常不方便，因为包含大量项目的菜单将开始弹出菜单按钮，尽管它被锚定在其底部。固定的边距/距离不是一个解决方案，因为菜单按钮的位置可能会在较小的屏幕上垂直变化。如何覆盖或“关闭”这种行为？不幸的是，我不能在网上分享我的代码，但Mui文档的sandbox可以很容易地修改来说明我的观点。下面是我所说的行为的两个截图。
而在一个较小的屏幕上，这将发生。
kxxlusnw1#
你可以改变锚点的位置，让菜单显示在右边。这样按钮就总是可见的。把这个添加到Menu prop 中。
Menu
anchorOrigin={{ vertical: 'bottom', horizontal: 'right', }} transformOrigin={{ vertical: 'top', horizontal: 'left', }}
您可以从这里expertiment的立场另一个选项是使用sx属性根据屏幕分辨率设置min-height。
sx
min-height
sx={{maxHeight: {xs:250, md:500}}}
hxzsmxv22#
我想知道在Menu上设置max-height是否对您有用？这是一个不那么麻烦的解决方案。您甚至可以使用calc
max-height
calc
sx= {{ maxHeight: 100 }} sx= {{ maxHeight: "calc(100% - 40px)" }}
或
PaperProps= {{ sx: { maxHeight: 100 } }} PaperProps= {{ sx: { maxHeight: "calc(100% - 40px)" } }}
2条答案
按热度按时间kxxlusnw1#
你可以改变锚点的位置，让菜单显示在右边。这样按钮就总是可见的。把这个添加到
Menuprop 中。您可以从这里expertiment的立场
另一个选项是使用
sx属性根据屏幕分辨率设置min-height。hxzsmxv22#
我想知道在
Menu上设置max-height是否对您有用？这是一个不那么麻烦的解决方案。您甚至可以使用calc或