Angular material navbar menu expand to full screen - css

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

Answer 1

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.