question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

overlays not working in CDK 8.1.2

See original GitHub issue

Reproduction

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: ng_mat_cdk_812

  • 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 to 8.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 the FullscreenOverlayContainer:
@NgModule({
   ...
  // when we deactivate this line, it even works with cdk version 8.1.2
  ,  providers: [{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }]
})

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:closed
  • Created 4 years ago
  • Reactions:12
  • Comments:12

github_iconTop GitHub Comments

7reactions
oktav777commented, Aug 16, 2019

I think the issue is related to lazy-loaded modules. Stackblitz example

  • Click Navigate, this button have a tooltip
  • Hover over This button has a tooltip but you wont see it ;( button, it will have a tooltip
  • Now open './comp/comp.module' and comment and uncomment the line 21 with providers option
  • The This button has a tooltip but you wont see it ;( tooltip is gone, the tooltip for Navigate works fine as it’s module is not lazy loaded
3reactions
yko-extcommented, Oct 15, 2019

I 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 }]

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found