Angular2 + Matériau: la barre d'outils mat ne projette aucune ombre sur le mat-sidenav-container malgré l'altitude-z *

Question

En essayant d'imiter l'apparence du Material guide, je ne peux pas obtenir l'ombre de la barre d'outils sur le sidenav-conteneur élément:

• Link to the page montrant la barre d'outils et sidenav, mais l'ombre portée n'est pas visible.
• Link to the page montrant la barre d'outils seule, l'ombre est rendu

Voir le code HTML, il ne peut pas être plus simple. Qu'est-ce que je rate? Merci ...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary"> 
    toolbar 
</mat-toolbar> 

<mat-sidenav-container > 

    <!-- Side menu --> 
    <mat-sidenav mode="side" opened="true"> 

    <h3>Menu 1</h3> 
    <ul> 

     <!-- Home (aka dashboard) --> 
     <li> 
     <a routerLink="/">dashboard</a> 
     </li> 

     <!-- Home (aka dashboard) --> 
     <li> 
     <a routerLink="/resolutions">resolutions</a> 
     </li> 
    </ul> 

    <!-- List resolutions --> 
    <h3>Menu 2</h3> 
    <ul> 
     <li> 
     <a>incentive</a> 
     </li> 
    </ul> 

    </mat-sidenav> 

    <!-- Routed contents --> 
    <div class="contents"> 
    <router-outlet></router-outlet> 
    </div> 

</mat-sidenav-container> 

Answer 1

avait exactement le même problème. Je résolus en ajoutant la classe suivante dans mon CSS:

.sidenav-container { 
    z-index: -1 !important; 
} 

et ajouté au tapis-sidenav-conteneur

<mat-sidenav-container class="sidenav-container"> 
... 
</mat-sidenav-container> 

Answer 2

pas été en mesure de tester, mais. J'ai eu un problème de sondage similaire avec des cartes ne semblant pas élevées. J'ai juste besoin de les tamponner à partir de la gauche.

<mat-sidenav mode="side" opened="true" style="margin: 10px;">

Answer 3

Vous pouvez aussi essayer ceci:

.sidenav-container { 
    position:fixed; 
    width:100%; 
    z-index:-1; 
}