3

Hey was trying to setup a Angular Material SideNav and after getting a basic layout setup I noticed a white line on the right side when the SideNav is open (not over). When looking at it in dev tools it is 1 pixel less than the width I set it to be.

So mat-sidenav width is 1 pixel less than the what I set in CSS. I set it to be 240 and it comes back 239 and that makes it 1 pixel smaller than expected and exposes the white that is under it. See screenshot below.

I created a stackblitz that reproduces this issue.

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html

Example of issue

Rodney S. Foley
  • 10,190
  • 12
  • 48
  • 66

1 Answers1

5

The mat-sidenav appears to have a border-right property of 1px. You can change it in your css:

 mat-sidenav{
   border-right:0px;
 }
Jojofoulk
  • 2,127
  • 1
  • 7
  • 25
  • Thanks, @Jojofoulk that fixed! Can't believe I didn't see that. Not sure why it has a border at all, it didn't use to be that way with v5.x but it's been a while so thanks for catching that! :) – Rodney S. Foley May 07 '19 at 17:03