How to position the Dropdown Panel just below the textbox of mat-select

Issue

I am using Angular Material 14.0.4 and Angular 15.1.3.

I have a mat-select dropdown which is written this way...

<mat-select value="5" panelClass="custom-panel">
    <mat-option value="5">5</mat-option>
    <mat-option value="10">10</mat-option>
    <mat-option value="20">20</mat-option>
</mat-select>

In this I have applied panelClass with its code in css as below...

.custom-panel {
    top: calc(100% + 10px) !important;
}

And it is still coming as below. Overlapping of the dropdown list with its textbox

This is the dropdown when it is not selected

This is the dropdown when it is selected

How to place the panel just below the textbox on selection...

Solution

You can use the below css to do that!

We use the css transform to move the panel to the bottom!

.custom-panel {
  transform: translateY(25px) !important;
}

stackblitz

Answered By - Naren Murali