Menu
I'm making a new angular2 application using angular2-material with a sidenav. And I can't for the life of me get that sidenav to have a height of 100%. I'm trying to get a menu to slide out that takes up the whole height of the screen. And I want it to open the same way no matter where the user has scrolled.
Here is my template:
<md-sidenav-layout class="demo-sidenav-layout"> <md-sidenav #start mode="over"> <a [routerLink]="['/login']" class="btn btn-primary">Log in</a> <br> </md-sidenav> <md-toolbar color="primary"> <button md-button (click)="start.toggle()">Open Side Drawer</button> <span>Spellbook</span> <span class="demo-fill-remaining"> </span> </md-toolbar> <div class="demo-sidenav-content"> <router-outlet></router-outlet> </div> </md-sidenav-layout> And here is my CSS:
.demo-sidenav-layout { //border: 3px solid black; min-height:100%; md-sidenav { padding: 10px; background: gainsboro; min-height: 100%; } } .demo-sidenav-content { padding: 15px; min-height:100%; } .demo-toolbar { padding: 6px; .demo-toolbar-icon { padding: 0 14px 0 14px; } .demo-fill-remaining { flex: 1 1 auto; } } I also have html set to height:100% and body set to min-height:100%
514
Specifying the main and side contentBoth 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.
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.
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.
Use fullscreen
<md-sidenav-layout fullscreen> <md-sidenav #start mode="over"> <a [routerLink]="['/login']" class="btn btn-primary">Log in</a> <br> </md-sidenav> <md-toolbar color="primary"> <button md-button (click)="start.toggle()">Open Side Drawer</button> <span>Spellbook</span> <span class="demo-fill-remaining"></span> </md-toolbar> <div class="demo-sidenav-content"> <router-outlet></router-outlet> </div> </md-sidenav-layout> Acording to a comment on Issue : Angular Material 2 - not rendering in full screen the fullscreen attribute will be removed...
Try this instead:
mat-sidenav-container { position: fixed; height: 100%; min-height: 100%; width: 100%; min-width: 100%; } 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
