Material sidenav has broken css when included into component #7574
Description
Bug, feature request, or proposal:
I my angular 4 project I want to load the sidenav inside a specific component app-note-sidebar-cmp, my component have an input and with this input it loads some data, so I put the mat-container in the components where I have to show this sidenav (father component).
But it seems not loading the sidenav correctly if that sidenav is inside another component.
What is the current behavior?
when I open the sidenav I don't see the grey backgroud like the example and if I click outside the sidenav it doesn't close.
Also, before to open the sidenav I see a horizontal scollbar at the bottom of the page...
But if I put the sidenav directly in the father component, without including note.component it will be show correctly, so is it possible to load the sidenav inside another component?
this is the note.component where I have the sidenav (selector: 'app-note-sidebar-cmp'):
<mat-sidenav class="example-sidenav-content" position="end" mode="over" #sidenav>
<div class="card card-plain">
<div class="card-content custom-timeline">
<div class="row">
<div class="col-md-12">
<div>
<div class="form-group label-floating">
<mat-form-field> <textarea matInput
placeholder="{{ 'ticketbundle.detail.labels.note' | translate }}"
rows="4" name="notes" #note></textarea> </mat-form-field>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- #select="matSelect"[(ngModel)]= "selectedItems"
<mat-select class="pull-right" #select
placeholder="{{'note.recentnotes' | translate }}" [(ngModel)]="selectedItems"
(change)="loadNotes(select.value)"> <mat-option
[value]="recentNotes">{{'note.recentnotes' |
translate }}</mat-option> <mat-option [value]="allNotes">{{'note.allnotes'
| translate }}</mat-option> </mat-select>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-info btn-round"
(click)="saveNote(note.value, select.value)">
<span class="btn-label"> <i class="material-icons">add</i>
</span>
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-info btn-round"
(click)="sidenav.close()">
<span class="btn-label"> <i class="material-icons">remove</i>
</span>
</button></div>
</div>
<ul class="timeline timeline-simple">
<li class="timeline-inverted"
*ngFor="let note of ticketBundleNoteList">
<div class="timeline-badge success">
<i class="material-icons">description</i>
</div>
<div class="timeline-panel">
<div class="card-row">
<div class="card-row-content padding-right10">
<i class="material-icons">account_circle</i>
</div>
<div class="card-text card-row-content">
<div class="timeline-heading">
<h3>Nome</h3>
</div>
<div class="timeline-body">
<p>{{note.text}}</p>
</div>
</div>
</div>
<div class="card-footer">
<div class="stats">
<span> <i class="material-icons">update</i>
{{'cardfooter.inserteddate' | translate }} {{note.createdDate |
date :('pattern.datehourmin' | translate)}}
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</mat-sidenav>
And this is the father component where note component is called:
<mat-sidenav-container class="example-container">
<app-note-sidebar-cmp [selected]="selected"> </app-note-sidebar-cmp>
.
. // other content
.
</mat-sidenav-container>