I make use of a material <mat-paginator> inside of my component and according to the requirements I need to adjust its position so that the list of options lies under the selected one. Here is what I need to achieve:
However, the default position of mat-options looks like this:
Inspecting the DOM Tree I can find <mat-select> inside of the <mat-paginator>. <mat-option> list seems to be rendered pretty much the same, it's being hosted inside DIV node with a class cdk-overlay-pane.
But while <mat-select> API allows me to provide panelClass property in order to apply additional CSS classes to the dropdown panel, <mat-paginator> does not. Also, I can't use ::ng-deep because I want to target only this dropdown and do not overwrite others.
Here is StackBlitz demo with mat-paginator.
