CODEWITHSUNDEEP
cssangularangular-materialangular-cdk
deamon
deamon

Reputation: 92437

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?

Upvotes: 6

Views: 11457

Answers (4)

Leccho
Leccho

Reputation: 666

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;
}

Upvotes: 6

Chapdast Dev
Chapdast Dev

Reputation: 21

Add

encapsulation: ViewEncapsulation.None

to @Component declaration.

Upvotes: 0

BernieSF
BernieSF

Reputation: 1828

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)

Upvotes: 0

Anton Chernous
Anton Chernous

Reputation: 61

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

Upvotes: 4

Related Questions