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

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?

cssangularangular-materialangular-cdk


Solution 1:[1]

Try using the ::ng-deep

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

Solution 2:[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

Solution 3:[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)

Solution 4:[4]

Add

encapsulation: ViewEncapsulation.None

to @Component declaration.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andy P
Solution 2 Anton Chernous
Solution 3 BernieSF
Solution 4 Chapdast Dev

Related Questions