Changing style of overlay container

user_1025633 0
Viewed 54815

I use a git project for a virtual keyboard (https://ngx-material-keyboard.github.io/demo/). And I have some issues to get it running on a small device with 450*250 pixel.

At the end I found the necessary changes in the css if I modify it directly at the web browser with dev tools.

Now I have to find the right position to change the sources.

There will be used the overlay component from angular2-material to visualize the keyboard.

If I comment out the position in the cdk-overlay-container, it works:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

But I cant overwrite these from my angular application. Any suggestions?

Screenshot of changes

angular-material2 angular-cdk angular-material angular
7 Answers

If you want to change the styling of mat-dialogue-container adding a panel class and giving style is enough, but in case if you want to change the styling of cdk-overlay-container then adding a backdropClass will help 

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

in css add 

.popupBackdropClass {
   background-color:yellow
 }
user_94023990

Overriding cdk-overlay-containeris not good since it is gonna affect all other components. You can create custom OverlayContainer. See example.

user_79438930

I found that by using the main/default "Styles.css". Styling changes for the CDK (as well as Material and Animations) are picked-up properly. (caveat) I am using Angular 4 .

user_82621100

I sort it out myself by using two stylessheet one Global and other component's stylesheet, In global i set z-index to to lower value(1000) so that it goes behind the header and in popup component styles sheet i set that to high value(2000) with !important so that header goes behind my overlay.

That's how i manage to solve it.

Thank me later

user_113933810

Avoid using encapsulation: ViewEncapsulation.None, because the css classes inside the component's css file, will influence the whole app. The best way is the one suggested by @Faisal

user_154470720
Related