-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Scrollable overlays not staying attached when inside tabs #8405
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
Comments
Definitely wait for an official response, but I was able to get it to work like this, <mat-tab-group>
<mat-tab label="Tab 1">
<div cdkScrollable style="overflow-y: auto; height: 200px">
<!-- ... -->
</div>
</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group> |
Yup, can confirm what you suggested does work @willshowell however I feel like wherever you put the cdkScrollable if that is the element that is scrolling for example my tab content is the part that is that should add it to the ScrollDispatcher and properly keep the element attached. I feel like this is still an issue will wait for official response as well. but will go with what you suggested for now @willshowell thanks! :) |
Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a `CdkScrollable` in order to allow for overlays inside the tabs to reposition. Fixes angular#8405.
@crisbeto any ETA on when your PR will be merged? |
Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a `CdkScrollable` in order to allow for overlays inside the tabs to reposition. Fixes angular#8405.
Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a `CdkScrollable` in order to allow for overlays inside the tabs to reposition. Fixes angular#8405.
Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a CdkScrollable in order to allow for overlays inside the tabs to reposition. Fixes angular#8405.
Any update on this ? |
Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a CdkScrollable in order to allow for overlays inside the tabs to reposition. Fixes #8405.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Seems like this a bug unless someone can point me in a direction why what I have doesn't work.
What is the expected behavior?
When applying the
cdkScrollable
class I would expect the overlay to stay attached to the elementWhat is the current behavior?
Does not stay attached to the element
What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on
@master
): https://goo.gl/uDmqyYStackBlitz starter (using latest
npm
release): https://goo.gl/wwnhMVHere is a StackBlitz:
https://stackblitz.com/edit/angular-material2-issue-yqzqdh
In the above I am applying the
cdkScrollable
class but it still does not seem to stay attached properly. Any ideas why? I believe I have it in the right spot which is on the element that is scrolling.Tried it other places as well but still no luck.
What is the use-case or motivation for changing an existing behavior?
Would like to use overlay components inside tabs.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
The text was updated successfully, but these errors were encountered: