Material-components-web: MDC-Menu cannot be pinned

[jimyhdolores]

Hello, I am trying to anchor a menu to a button to open the menu, I followed the instructions in the document but there is no effect, is there something I am missing?

I leave the example

https://codepen.io/jimmyhdolores/pen/QWEWaWy

Versions:

"material-components-web": "^7.0.0"

[dabrowne]

I've had similar woes. Anchoring using the JS api just doesn't seem to work that well, and the documentation for this library is absolutely shocking. I found the one way to get it to work was this

menu.setFixedPosition(true);

however things get a bit weird if you resize with the menu open.

A more reliable way is to wrap the anchor element and the menu surface together inside another element with the class mdc-menu-surface--anchor (and remove the setAnchorElement call). The library will automatically anchor the menu based on this markup: https://codepen.io/dabrowne/pen/RwRwJLo

This is documented here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu#anchors-and-positioning

[jimyhdolores]

Hello @dabrowne thank you very much for the information and for example I am going to test it.

[abhiomkar]

Hi @jimyhdolores ! It is unclear what you mean by _pinned_.

For your use case you'll have to follow the documentation mentioned in Anchor To Element Within Wrapper section. Menu wrapper (i.e., mdc-menu-surface--anchor) should only contain the Menu and menu button.

Here is the updated codepen with working example.