CODEWITHSUNDEEP
cssangularangular-material
Im Dirtyham
Im Dirtyham

Reputation: 11

Sidenav backdrop not displayed

I try to add a sidenav from Angular/Material to my website. All works fine expect the backdrop : it didn't appear on the main page. Find my code here : https://plnkr.co/edit/DMMz9dMoZasfMExWgjSD?p=options (first time using this tools, all advices are welcomed !)

In menu.component.html :

<md-toolbar>
    <div class="sidenav-button">
        <button type="button" md-icon-button (click)="sidenav.toggle()">
            <md-icon>reorder</md-icon>
        </button>
    </div>
</md-toolbar>

<md-sidenav-container fullscreen class="sidenav-container">
    <md-sidenav #sidenav mode="push" class="sidenav left-nav" opened="false">
        <md-nav-list>
            <a md-list-item>
               Home
            </a>
            <a md-list-item>
               Channels
            </a>
        </md-nav-list>
    </md-sidenav>
</md-sidenav-container>

I just copy/paste the example from the official documentation (https://material.angular.io/components/sidenav/overview) with no result..

Thanks

Upvotes: 1

Views: 475

Answers (1)

cozmik05
cozmik05

Reputation: 517

I know it's been months since this question was asked. Just came across it so decided to answer it since no solution was given.

Import one of the angular material theme to your style sheet, doing so should fix the issue. example - add

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

to your styles.css

https://material.angular.io/guide/theming

Upvotes: 1

Related Questions