Alternative to ng-deep while applying styles to a mat control

Question

For a sidenav with an embedded iframe, i was getting double scrollbars, I fixed that using

::ng-deep.mat-drawer-inner-container {
     overflow: hidden !important;
 }

This is now causing other mat-drawer-inner-container overflows to be hidden too. How can i fix this?

Answer 1

To hide the scrollbar from the side panel you just need to add the below css to your style.scss

.mat-drawer-inner-container::-webkit-scrollbar {
display: none;

}

Please Note: If you use this CSS in the sidebar component then it will not work!

Answer 2

add this to your style.scss without::ng-depp, so maybe you put this inside some module where you need it.

// Remove scrollbar from mat-sidenav inner container
.mat-drawer-inner-container {
  overflow: hidden !important;
}