Components: 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});

[simeyla]

This is still a mess :-/ It's crazy!

A menu that would fit perfectly on screen gets top or bottom applied to the .cdk-overlay-pane which puts in cleanly off the top of the page. The actual menu is sized correctly but just positioned wrong.

You can get it to fit with this :

 .cdk-overlay-pane { top: 20px !important; }

I consider the above to be a horrible temporary fix which I'm just using during development.

Sample project (resize window first if you have a huge screen):

https://stackblitz.com/edit/angular-4mswhc?file=app%2Fapp.component.html

[simeyla]

You can actually put two rows of menu items if you change the css to a flex model.

 /* Needs to be in root because it is shown in a global overlay*/
.mat-menu-panel.menu-product-list {
    max-width: 500px;

    .mat-menu-content
    {
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

And create menu like this (I'm using @angular/flex-layout)

      <mat-menu class="menu-product-list"
                fxLayout="row"
                fxWrap>
          <button mat-menu-item
                  fxFlex="1 0 250px"
                  *ngFor="let choice of choices">{{ choice.shortName }}</button>
      </mat-menu>

This can actually be a very nice effect if you have only a dozen or so items that is suitable for two columns. You can also make the button itself a flex layout if you want an image and label.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}