In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file.
::ng-deep .cdk-overlay-pane {
transform: translate(78%, 10%);
}
However, this adjustment also affected the position of my Dialog Panels. I tried adding a class to mat-menu and applying the same style, but it did not produce different results.
<mat-menu #menu="matMenu" class="kebab-mat-menu">
<button mat-menu-item (click)="deleteClinic(clinicData)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
</mat-menu>
.kebab-mat-menu{
::ng-deep .cdk-overlay-pane {
transform: translate(78%, 10%) !important;
}
}
My question is how can I apply this style only to mat-menu? Thank you.