Reputation: 78402
I use the below an the side nav does not show. If I add content the sidebar shows. Wow..
<md-sidenav-container mode="side" >
<md-sidenav #sidenav opened="true" style="background-color: green">
Dude!!!!!!
</md-sidenav>
<div class="my-content" style="background-color: blue">
<router-outlet name="servicelistright"></router-outlet>
</div>
</md-sidenav-container>
e.g. I add content then works. How so I resolve this silly issue?
<div class="my-content" style="background-color: blue">
Whats the deleio?
<router-outlet name="servicelistright"></router-outlet>
</div>
Upvotes: 2
Views: 1767
Reputation: 204
The reason you can't see your sidenav unless you fill your <md-sidenav-container>
with content is the <md-sidenav>
overlap (in case of over
mode, or just push in side
mode) your <md-sidenav-container>
.
Therefore as long as your container does not contain anything, it's empty and an empty div doesn't have any height, so does your related sidenav.
Upvotes: 1
Reputation: 41581
<md-sidenav-container class="container-fluid">
<!-- separating content between each other -->
<div class="col-md-1">
<button md-button (click)="sidenav.open()">
<i class="fa fa-list"></i>
</button>
</div>
<div class="col-md-11">
Main content goes here
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- below contains elements for menu strip -->
<md-sidenav #sidenav class="example-sidenav">
Menu bar
</md-sidenav>
</md-sidenav-container>
Note: <br>
is added to create a height.
Upvotes: 0