CODEWITHSUNDEEP
angularangular-materialangular-cdk
lostintranslation
lostintranslation

Reputation: 24583

Angular Material CDK Overlay scroll block not working when in nav sidebar

I am adding a CDK overlay to a mat-sidenav. I would like to block scrolling on the mat-sidenav when the overlay is open.

I create overlay with scrolling blocked:

const overlayConfig = new OverlayConfig({
  scrollStrategy: this.overlay.scrollStrategies.block(),
});

const overlayRef = this.overlay.create(overlayConfig);

I am not doing anything special with the mat-sidenav, as its scrollable by default.

Here is a stackblitz showing the problem. You should be able to scroll the side-nav, then open and overlay and notice that the sidenav is still scrollable

https://stackblitz.com/edit/angular-z68qqg

enter image description here

Upvotes: 11

Views: 14894

Answers (2)

Sourav Kumar
Sourav Kumar

Reputation: 1

You have to add cdkScrollable attribute to the scrolling element. Then applying a scrolling strategy would work. For your case, you can use a close strategy to close the popover on the scroll.

Upvotes: 0

Ivan Zinchenko
Ivan Zinchenko

Reputation: 111

You have to add cdk-scrollable directive on scrollable container, as described in this issue https://github.com/angular/components/issues/6157

Upvotes: 8

Related Questions