CODEWITHSUNDEEP
angularangular-materialangular-material2angular-cdk
user1025633
user1025633

Reputation: 283

Changing style of overlay container

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

Upvotes: 27

Views: 84176

Answers (8)

Ara Winters
Ara Winters

Reputation: 11

I thought up a better(mmm.. more interesting maybe) way to do this by using the :has() css selector. Even though you can't set the class of the .cdk-overlay-container you can set the panelClass of the cdk-overlay-pane. If you set the panelClass in your dialog config you can then add a ::ng-deep statement in the component scss file that uses that panelClass to target the cdk-overlay-container element that contains an element with that matching panelClass.

const dialogRef = this.dialog.open(MyDialogComponent, {
    panelClass: 'my-dialog-panel',
    hasBackdrop: false
});

then in the scss file add a:

::ng-deep .cdk-overlay-container:has(.my-dialog-panel) {
    z-index: 3000;
}

you could also avoid the ng-deep and just add it to the global styles too and the class would still be reasonably isolated compared to the alternatives.

Upvotes: 1

constantine-d
constantine-d

Reputation: 41

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

Upvotes: 0

Vugar Abdullayev
Vugar Abdullayev

Reputation: 2085

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

Upvotes: 1

B Stensrud
B Stensrud

Reputation: 1

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 .

Upvotes: 0

Awais
Awais

Reputation: 4902

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

Upvotes: 0

Pran R.V
Pran R.V

Reputation: 1158

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
 }

Upvotes: 4

FAISAL
FAISAL

Reputation: 34673

UPDATED ANSWER

From the official documentation:

Styling overlay components

Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.

You can override the default dialog container styles by adding a css class in your global styles.css. For example:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

After that, you'll need to providies you css class as a panelClass parameter to your dialog:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Read this official documentation for more information.

ORIGINAL ANSWER

Use ::ng-deep in your component.css to override the default styles.

::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}

Upvotes: 51

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

To be able to override the Material CSS classes from your component styles, you will need to set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})

Upvotes: 4

Related Questions