Skip to content

Sidenav make CdkScrollable accessible #9136

Closed
@probert94

Description

@probert94

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

The Sidenav automatically wraps the content in a mat-sidenav-content.
Also the CdkScrollable-directive is added to this element and I would like to get a reference to it.

What is the current behavior?

It does not seem to be possible to access the CdkScrollable instance.
As it is created automatically it does not seem to be accessible using @ViewChild or @ContentChild.

What are the steps to reproduce?

Create a simple Sidenav and check the resulting HTML in the DevTools:

Written code

<mat-sidenav-container>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <div>Main content</div>
</mat-sidenav-container>

Resulting HTML

<mat-sidenav-container>
    <div class="mat-drawer-backdrop"></div>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <mat-sidenav-content cdkScrollable>
          <div>Main content</div>
    </mat-sidenav-content>
</mat-sidenav-container>

Now try to access the cdkScrollable-Instance of the mat-sidenav-content.

What is the use-case or motivation for changing an existing behavior?

The content of the sindenav is scrollable by default. In my case I want to hide some elements, when the user scrolls down.
My work-around is to wrap the content in another scrollable-container and make the mat-sidenav-container not-scrollable (height = parent height).

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functions

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions