Search code examples
cssangularangular-material

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

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

Show Dropdown

This is the dropdown when it is selected

Selected Dropdown

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