0

I'm making an material design app angular2 and angular-material. I have a Header component which contains an md-toolbar and an md-sidenav within md-sidenav container here is header.component.html:

<md-sidenav-container>
<md-sidenav #sidenav class="left-nav">
    <md-nav-list>
        <a md-list-item href="#"> Home </a>
        <a md-list-item href="#"> About </a>
    </md-nav-list>
</md-sidenav>

<md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.open()">
        <md-icon>menu</md-icon>
    </button>
    <span> Trends </span>
</md-toolbar>

I have another stories component which uses *ngFor to prints contents of a list. Here is my stories.component.html:

<div class="main-content">
  <ol>
    <li *ngFor="let story of stories; let i = index" class="post">
      <span> {{ story.title }} </span>
    </li>
  </ol>
</div>

Now this works fine, but when the sidenav is opened its contained only with in the toolbar like this: without using fullscreen which is not what it want. So I use angular's fullscreen tag(?) in my sidenav-container:

<md-sidenav-container fullscreen>

This makes the sidenav look normal with fullscreen but now the contents of stories component are no longer visible. The <li> elements are still there(I can see them in Chrome dev tools) but they are not visible on the page.This is how my app.component.html is laid out:

<div id="wrapper">
  <app-header></app-header>
  <app-stories></app-stories>
</div>

I want to have a typical sidenav which covers my whole page and I also want the contents of my stories component to be visible properly. I've tried moving around the md-toolbar directive and bunch of other stuff but with no avail. How can this be fixed?

Amol Borkar
  • 2,321
  • 7
  • 32
  • 63
  • 1
    If I am understanding the problem here, it sounds like your elements or ending up behind other elements. Try to see if you can adjust the z-index to the missing data. Make sure you set the position to relative. http://stackoverflow.com/a/15782135/2218253 – wuno Mar 26 '17 at 17:20
  • @wuno Yes thats whats happening. i'll try adjusting the z-index, though I was hoping this could be fixed without using external css stuff. – Amol Borkar Mar 26 '17 at 18:04
  • Why? Css is the easiest things to fix! If you need help try and replicate the problem for us. I am sure someone else or I can come up with something pretty quickly to help! – wuno Mar 26 '17 at 18:06

0 Answers0