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

user_1108205 0
Viewed 1556

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

enter image description here enter image description here

FULLSCREEN MODE

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

enter image description here enter image description here

angular-google-maps angular-material
2 Answers

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.

user_35969430

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;
  }
user_98116810
Related