Menus open from edge not working

Bugs

Follow the template below to ensure the quickest and most accurate response to your issue.

What MDC-Web Version are you using?

v0.11.1

What browser(s) is this bug affecting?

N/A

What OS are you using?

N/A

What are the steps to reproduce the bug?

Documentation states that there are convenience classes to use for changing opening point of menus:

The menu will open from the top left by default (top right in RTL). Depending on how you’ve positioned your button, you may want to change the point it opens from. To override the opening point, you can style transform-origin directly, or use one of the following convenience classes:

Adding any of this classes to menu component does not change anything, ie:

<div class="mdc-simple-menu mdc-simple-menu--open-from-top-right">

Searching source code shows this classes are not used anywhere.

What is the expected behavior?

Opening menu from edge specified with class.

What is the actual behavior?

Always opening menu from top-left (or different edge when there is no space)

Please describe what the component/code is actually doing that’s different from what it should be doing.

Any other information you believe would be useful?

[aecz]

@Garbee Thanks for explaining. Convenient classes are indeed for animations only. (Maybe we could rename them mdc-simple-menu–animate-from-top-right).

My question is then, how do we position the menu to top right ?

I have made another codepen copying the official demo. It adds the convenient classes depending on the button position AND fix the menu position.

Without position workaround:

With position workaround:

Any chance that this could be the default behavior or make it easier to position the menu correctly?

[aecz]

I have this issue too. I forked the codepen above and added this workaround:

.mdc-simple-menu--open-from-top-right {
  left: auto !important;
  right: 0;
  transform-origin: right !important;
}

https://codepen.io/aecz/pen/MEejQV

Demo below is working but only because the anchor is close to the right border. https://material-components-web.appspot.com/simple-menu.html Also, the demo does not seem to use the convenient classes.