overlays not working in CDK 8.1.2
See original GitHub issueReproduction
Here is our related stackblitz example.
This uses the same dependencies as our app, but unfortunately we cannot reproduce it on Stackblitz yet. We hope someone can guide us in the right direction to make a reproduction example.
Expected Behavior
The overlays should show up in front of all other elements - even in full-screen mode.
Actual Behavior
The overlays show up behind all other elements, and are invisible. So at first sight it seems that the clicks don’t work.
Here is an example what happens in our app:
- when we first open the app and click on the pager-dropdown the overlay is not shown
- this also happens for other drop-downs (and even for modal dialogs)
- when we switch to full-screen mode (we use screenfull-js) the overlays appear
- when we now exit full-screen the drop-downs work correctly
more info:
- when we revert the @angular/cdk version from
8.1.2
to8.1.1
the app works correctly - even with
8.1.2
we can make the app work (at least in non-fullscreen mode) when we deactivate theFullscreenOverlayContainer
:
@NgModule({
...
// when we deactivate this line, it even works with cdk version 8.1.2
, providers: [{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }]
})
- maybe this is related to pull-request #11940?
We hope that someone can give us a hint what this could be related to or what else we could try or check so that we can give a reproduction example on stackblitz.
Backreference to a related Stackoverflow question
Environment
- Angular: 8.1.3
- CDK/Material: 8.1.2
- Browser(s): Chrome, Firefox and possibly all others
- Operating System (e.g. Windows, macOS, Ubuntu): Win 10 64-bit
Issue Analytics
- State:
- Created 4 years ago
- Reactions:12
- Comments:12
Top Results From Across the Web
Issue related to angular overlay cdk global positioning ...
I am following a tutorial and have implemented drag and drop, however I am facing 2 issues. On using new GlobalPositionStrategy(document); ...
Read more >UNPKG - @angular/cdk
@angular/cdk/bundles/cdk-overlay.umd.min.js.map. Version: ... open: boolean = false;\n\n /** Whether or not the overlay should attach a backdrop.
Read more >Angular (forked) - StackBlitz
CdkOverlayOrigin, RepositionScrollStrategy,. ScrollStrategy} from '@angular/cdk/overlay';. import {ComponentPortal} from '@angular/cdk/. portal';.
Read more >Strange issues with Overlay component | Infragistics Forums
Here is the complete list of issues i see. ... if i use angular Materials CDK overlay I do not have these issues...
Read more >@angular/cdk | Yarn - Package Manager
cdk ; f61a21382, fix, select: changed after checked error if option label changes (#23315) ; 1566ab10d, fix, slide-toggle: focus indication not showing inside ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think the issue is related to lazy-loaded modules. Stackblitz example
Navigate
, this button have a tooltipThis button has a tooltip but you wont see it ;(
button, it will have a tooltip'./comp/comp.module'
and comment and uncomment the line21
with providers optionThis button has a tooltip but you wont see it ;(
tooltip is gone, the tooltip forNavigate
works fine as it’s module is not lazy loadedI can confirm this i had trouble with DatePicker and Dialogs in Version 8.1.2+ It works if I remove
providers: [{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }]