Menu
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as - flex - flex="85" (to get 85% of its container)
Can't seem to find a good approach.
854
Both the main and side content should be placed inside of the <mat-sidenav-container> , content that you don't want to be affected by the sidenav, such as a header or footer, can be placed outside of the container. The side content should be wrapped in a <mat-sidenav> element.
The <mat-sidenav>, an Angular Directive, is used to create a side navigation bar and main content panel with material design styling and animation capabilities. <mat-sidenav-container> - Represents the main container. <mat-sidenav-content> - Represents the content panel. <mat-sidenav> - Represents the side panel.
All you do is add (click)="sidenav. close()" along with the routerLink="/whatever/path/here" works. This will close the sidenav on directing to a page.
A mat-sidenav can be opened or closed using the open(), close() and toggle() methods. Each of these methods returns a Promise that will be resolved with true when the sidenav finishes opening or false when it finishes closing.
In angular material, md-sidenav has these attributes:
width: 304px; min-width: 304px; That's why the width will be fixed at 304 px no matter what device you use. So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active { min-width: 200px !important; width: 85vw !important; max-width: 400px !important; } Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
88
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open { width: 250px; min-width: 250px; max-width: 250px; } I'm not sure if that is the proper way but it seemed to work for me.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
