CODEWITHSUNDEEP
cssangularangular-material
Rahul.S
Rahul.S

Reputation: 413

mat-toolbar not match width with mat-sidenav

Learning angular material design. I created a side-nav and inside it i placed a mat-toolbar, but mat-tool bar not taking the full-width of its parent side-nav, showing some white line on its right side ( which is the background colour of its parent) How can I remove the white background

https://i.imgur.com/TaYIzjd.png

main-nav.component.html

`<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
      <mat-toolbar color="primary">Menu
      </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>printhouse</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>`

main-nav.component.css

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
 box-shadow:  2px 0 6px rgba(0,0,0,0.24);

}

.sidenav .mat-toolbar {
  /* background: inherit; */

 }


.mat-toolbar.mat-primary {
  position:sticky;
  top: 0;
  z-index: 1;

}

How can I remove the white background

Upvotes: 0

Views: 1975

Answers (1)

Fabian K&#252;ng
Fabian K&#252;ng

Reputation: 6183

Add the following to your CSS:

.mat-drawer-side {
  border: none;
}

Working stackblitz can be found here

Upvotes: 2

Related Questions