7

I am using mat-select to display a list of options. So, when you click on the mat-select input filed, it shows a list of options using div with cdk-overlay-pane class. I want to customize cdk-overlay-pane class. Using ::ng-deep I did this like,

  ::ng-deep {
    .cdk-overlay-pane {
      transform: translateX(-40px) translateY(-13px) !important;
    }
  }

& it works also, but it is affecting another cdk-overlay-pane.

Is there any way to give customClass to that div with cdk-overlay-pane ?

<div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX(-40px) translateY(-51px);">

so that only this div will be customized & it will not affect other divs.

Vikram Sapate
  • 1,087
  • 1
  • 11
  • 16

2 Answers2

10

You should use MAT_SELECT_CONFIG injection token . It has an option overlayPanelClass: string | string[], which represents:

the class or list of classes to be applied to the menu's overlay panel.

Shortly, use the following code at component or at module level:

providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],

Demo: https://stackblitz.com/edit/angular-hxgonn

The overlayPanelClass option is available from Angular Material v11.

MAT_SELECT_CONFIG is docummented here. MatSelectConfig is docummented here:

andreivictor
  • 7,628
  • 3
  • 48
  • 75
  • 1
    MAT_SELECT_CONFIG & MatSelectConfig are in the documentation, but they've not mentioned how to use them. So, it looks confusing for beginners. It'll be better if they give some examples also. – Vikram Sapate Nov 21 '21 at 10:50
  • 1
    Thanks. The same method can be used for mat-menu as well. Just replace MAT_SELECT_CONFIG with MAT_MENU_DEFAULT_OPTIONS. – Deepesh Kumar Mar 19 '22 at 11:48
  • @DeepeshKumar, you're right. I've posted an answer about that here: https://stackoverflow.com/questions/61679508/how-to-customize-cdk-overlay-pane/70076714#70076714 – andreivictor Mar 19 '22 at 14:29
  • Does the datepicker has something like this? I guess not, because I can't find anything in the docs. – Szörényi Ádám Apr 05 '22 at 19:03
  • @SzörényiÁdám, I didn't find anything in the docs, but I took a look in the code and I found that the datepicker overlay panel receives the following classes: `mat-datepicker-popup` or `mat-datepicker-dialog`: https://github.com/angular/components/blob/master/src/material/datepicker/datepicker-base.ts#L649. Maybe you can use them – andreivictor Apr 06 '22 at 06:12
  • Or maybe you can use the `panelClass` property for the `mat-datepicker` component. It will style the `` node, that is placed inside the `cdk-overlay-pane`. – andreivictor Apr 06 '22 at 06:16
  • @andreivictor Thanks. I needed a custom class because I wanted to use the picker inside an ag-grid filter and cancelling the picker closed the filter (you can disable this behavior if you add a class to both the panel and the overlay div as well). I used a workaround now with native js and the open event of the datepicker. I hope in the future there will be a better solution. – Szörényi Ádám Apr 06 '22 at 10:11
2

@andreivictor's answer didn't work for me. Because I'm using select inside the autocomplete. If you are using autocomplete you have to do like this;

import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';

--

..
  providers: [
    {
      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],
..
mehmetdemiray
  • 976
  • 4
  • 13
  • 32