Skip to content

Commit 806108d

Browse files
committed
fix(sidenav): mark sidenav content as scrollable
Marks the sidenav's inner scrollable element as `cdkScrollable` so any overlays placed inside of it can update. Fixes #19846. Fixes #18453.
1 parent db4b0cd commit 806108d

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

src/material/sidenav/drawer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="mat-drawer-inner-container">
1+
<div class="mat-drawer-inner-container" cdkScrollable>
22
<ng-content></ng-content>
33
</div>

src/material/sidenav/drawer.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,17 @@ describe('MatDrawer', () => {
643643
}));
644644

645645
});
646+
647+
it('should mark the drawer content as scrollable', () => {
648+
const fixture = TestBed.createComponent(BasicTestApp);
649+
fixture.detectChanges();
650+
651+
const content = fixture.debugElement.query(By.css('.mat-drawer-inner-container'));
652+
const scrollable = content.injector.get(CdkScrollable);
653+
expect(scrollable).toBeTruthy();
654+
expect(scrollable.getElementRef().nativeElement).toBe(content.nativeElement);
655+
});
656+
646657
});
647658

648659
describe('MatDrawerContainer', () => {

0 commit comments

Comments
 (0)