Angular material navbar menu expand to full screen

Question

I use angular material for ui component and follow the below tutorials to create my own page.

https://stackblitz.com/angular/pbndqaomepr?file=app%2Fmenu-overview-example.html

When I click menu, angular shows a div containing Item 1 and Item 2 that's ok fro big screen. What I tried to do is to be sure that the div expands to the full browser windows just in case mobile devices.

So I added the following css:

@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    width: 100vw;
    height: 100vh
  } 
}

And use the following menu template:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class="menu-screen">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button> 
</mat-menu>

And nothing happens.

I need that matMenu item to cover the full monile screen. What I'm doing wrong ? One of my friends suggested listening menu item opened event and to show a pop-up filling the window. However, I felt that it would be cumbersome.

Thanks

Possibly a duplicate of stackoverflow.com/questions/29655242/… — Samuel Hulla

Fredrik_Borgstrom Fredrik_Borgstrom · Accepted Answer · 2019-03-09T14:43:11

First of all, you either need to apply that css code for the whole document, or if you keep the css in your component, you need to set the encapsulation mode of the component to NONE. Because the menu is created in an overlay container as a child to your body element, not as a child to your component.

Secondly, angular material creates several containers with which encapsulate the menu, and their positions need to be overridden.

So, in your menu-overview-example.css file, put this code:

.cdk-overlay-connected-position-bounding-box {
  left: 0 !important;
}
@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    max-width: unset !important;
    width: 100vw;
  } 
}

and in your menu-overview-example.ts file, add this to your component decorator:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

I've created a forked working version of your code here: https://stackblitz.com/edit/angular-sjy3em

You probably want to make the selectors more specific so you can remove the !important directive from your code, it's bad practice but I used it for simplicity here.

Angular material navbar menu expand to full screen

1 Answers