Angular Material Select (mat-select) not showing when Angular Google Maps in full screen mode

Question

I am using Angular Material and Angular Google Maps. I have a Angular Material form in the Snazzy-Info-Window which works fine in normal mode. It displays the mat-select nicely but when I click the fullscreen button the mat-options in the mat-select don't show up. As soon as I come out of the full screen mode, I see the options panel.

Is this a bug or am I missing something. The dropdown options show up if I use the native select but not mat-select.

NORMAL MODE

FULLSCREEN MODE

When in Fullscreen mode of google maps mat-select doesn't show panel but it is there when I inspect it.

Lavender

post your sample code! – Phenomenon

Answer 1

The Angular material team has an overlay container which supports full screen mode.

In your root module's @NgModule definition, probably in the app.module.ts file, do this:

import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
    ...
    providers: [
        {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
    ],
    ...
})

Now all material components which use an overlay container will work in full screen mode.

Kero

That solved it for me. (I am using Angular 11 with screenfull.js) – Mouldon

Answer 2

This issues caused by designing overlapped try this

and most important don't forget to put this at styles.scss (At root folder)

.cdk-overlay-container {
  z-index: 1050 !important;
}

OR

.cdk-overlay-container {
  z-index: 99999 !important;
}

OR

  .cdk-global-overlay-wrapper, .cdk-overlay-container {
     z-index: 99999 !important;
  }

Became

I added it to the style.scss at the begining of the file but no luck. As soon as map goes to fullscreen mode dropdown disappears. – Lavender