CODEWITHSUNDEEP
angularangular-material
Tampa
Tampa

Reputation: 78402

md-sidenav-container in angular2 material does not show content

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

Answers (2)

Mozgor
Mozgor

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

Aravind
Aravind

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.

LIVE DEMO

Upvotes: 0

Related Questions