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