CSS for Angular .cdk-virtual-scroll-content-wrapper not applied

Question

I want to customize a <cdk-virtual-scroll-viewport> by using the CSS class .cdk-virtual-scroll-content-wrapper so that the scroll container always shows a scrollbar. But my CSS code for this specific element is not applied (all other styles in the same component are working).

.cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

The behavior is not specific to this CSS property - if I set a border for example there is also no effect.

In the developer tools I can see the effective CSS, which lacks overflow-y:

.cdk-virtual-scroll-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    contain: content;
}

But if I change the CSS of the respective HTML element directly in the developer tools of the browser, the scroll bar is displayed.

Setting CSS for cdk-virtual-scroll-viewport or cdk-virtual-scroll-viewport > div doesn't work either:

cdk-virtual-scroll-viewport {
  overflow-y: scroll;
}

I'm using Angular 10.2.2 with Sass.

How to apply CSS to .cdk-virtual-scroll-content-wrapper?

Sternson

Answer 1

Try using the ::ng-deep

::ng-deep .cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

Update

as mentioned below, this can cause side effect, to isolate, add a css class like this:

.your-class ::ng-deep .cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

Wean

Editing angular material css is not so easy, but I find it easier to do so in you css file which is at the same level of your index.html. If you're inspecting element you'll find that sometimes styles are applied before your component. You also might need to use the !important css option. – Wean

I recommend reading a bit about ng-deep and its side effects and future compatibility, prior to copy-pasting the above snippet into your production code. – Britney

::ng-deep is gonna be deprecated soon – Whipstall

Answer 2

I had the same issue trying to style the virtual scroll content wrapper in the scoped stylesheet(component level). Worked when I moved

.cdk-virtual-scroll-content-wrapper {
  // styles
}

to styles.scss

Telestich

Answer 3

For me, worked when I moved the cdk-virtual-scroll-content-wrapper css code from the component css file to styles.css (same folder level as index.html)

Optic

Answer 4

Add

encapsulation: ViewEncapsulation.None

to @Component declaration.

Prenatal