CODEWITHSUNDEEP
cssangularangular-materialangular7angular-material-7
Rodney S. Foley
Rodney S. Foley

Reputation: 10330

Angular Material's mat-sidenav width is 1 pixel less than the what is set in CSS

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

Upvotes: 4

Views: 1485

Answers (1)

JossFD
JossFD

Reputation: 2216

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

 mat-sidenav{
   border-right:0px;
 }

Upvotes: 6

Related Questions