material-components-web
material-components-web copied to clipboard
material-components
[MDCMenu] Menu prioritizes anchor position over visibility
Bug report
We use menus with icon buttons as anchor in our project for e.g. managing time. The menu contains a small UI that takes up some horizontal space.
We noticed that on lower screen width, if the menu anchor is near the center of the screen, the menu will be cut off, even though there is in theory enough space. But the menu seems to prioritize touching the anchor with one corner over being visible.
We feel like it should be the other way around.
Steps to reproduce
- Create a menu with small anchor and high surface width (at least half the screen size)
- Position the menu anchor horizontally centered
- Open the menu
Actual behavior
The menu is cut off.
Expected behavior
The menu is moved into the viewport.
Screenshots
Your Environment:
| Software | Version(s) |
|---|---|
| MDC Web | 13.0.0 |
| Browser | Google Chrome 96.0.4664.93 |
| Operating System | Ubuntu 18.04.6 LTS |
Hey Manuela, thank you for the issue.
To clarify, is the anchor in the above screenshot the container of the whole group of icon buttons, or just one icon button? It appears that the top left corner of the menu is lined up with the left bottom corner of the icon button group (not the "timer" button).
One strategy that has worked well in other similar cases is to use the right anchor corner for positioning (so that menu grows to the left), given the general positioning of the icon buttons in your layout towards the right side of the page.
It's anchored on this icon:
Right, we actually do use the right corner in our system. This screenshot was just to highlight the issue.
On bigger screen width, there is enough space for it to expand on the left. This is really about lower screen width only. And on lower screen width it would just lead to the menu being cut off on the left.
I'm having the same issue. It seems to flip the horizontal direction when there is enough space on the left. But on smaller screens there might not be enough space on the left to flip the whole menu. It seems to me that in such a case the menu should not flip but shift enough that it doesn't overflow viewport.
