Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidenav make CdkScrollable accessible #9136

Closed
probert94 opened this issue Dec 27, 2017 · 1 comment · Fixed by #9183
Closed

Sidenav make CdkScrollable accessible #9136

probert94 opened this issue Dec 27, 2017 · 1 comment · Fixed by #9183
Assignees
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@probert94
Copy link

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).

@crisbeto crisbeto self-assigned this Jan 1, 2018
@crisbeto crisbeto added has pr P4 A relatively minor issue that is not relevant to core functions labels Jan 1, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 1, 2018
Exposes the `CdkScrollable` instance that wraps around the drawer's content. This makes it easier for consumers to react to scrolling inside the container.

Fixes angular#9136.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 8, 2018
Exposes the `CdkScrollable` instance that wraps around the drawer's content. This makes it easier for consumers to react to scrolling inside the container.

Fixes angular#9136.
jelbourn pushed a commit that referenced this issue Jan 21, 2018
Exposes the `CdkScrollable` instance that wraps around the drawer's content. This makes it easier for consumers to react to scrolling inside the container.

Fixes #9136.
jelbourn pushed a commit that referenced this issue Jan 23, 2018
Exposes the `CdkScrollable` instance that wraps around the drawer's content. This makes it easier for consumers to react to scrolling inside the container.

Fixes #9136.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants