md-menu is defaulted to `max-height: calc(100vh + 48px);` and goes off page

[coreyhickson]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I expect that the menu would size to stay on the screen and scroll when it has a lot of items in it.

What is the current behavior?

Currently, it will just go off the bottom of the page and I won't be able to see a lot of items.

This is the bottom of my browser and there are more items below it.

What are the steps to reproduce?

Add a menu with a lot of buttons. Don't put the menu at the top of the page. Open the menu, it will go down below the bottom of the page.

http://plnkr.co/edit/FPHeqOjRHpJOBNGn5dvz?p=preview

What is the use-case or motivation for changing an existing behavior?

If I want a bunch of items in a list.

Which versions of Angular, Material, OS, browsers are affected?

Angular: 2.3.1
Material: 2.0.0-alpha.11-3
Mac
Chrome

And I assume it's on most others.

Is there anything else we should know?

It looks like this is happening in https://github.com/angular/material2/blob/master/src/lib/menu/menu.scss#L16. So having it be a full viewport means it's guaranteed to go below the page.

[kara]

Ha, yeah this is definitely not right. First, I think that 48px was supposed to be subtracted, not added. The Material Design spec says it should be one row height less than the page height. Also you are right that vh probably doesn't make sense here given that the trigger can be anywhere. We'll need to take another look at this.

[coreyhickson]

Sounds good 👍 Thanks!

[michallevin]

@kara
As you said, the spec calls for the menu to end one or two row heights from the bottom of the page. Angular Material 1 has a set max height with a fixed position. One option is to calculate the max height in the code based on the element that opens the menu. Another option is to use the same strategy as Angular Material 1, and use a margin to the create space between the menu and the bottom of the screen.

What do you think?
@EladBezalel
#GoodnessSquad

[ctytgat]

Just encountered this issue with 2.0.0-beta7. Code still doesn't take trigger position into account:

max-height: calc(100vh - #{$mat-menu-item-height});