How to position Dropdown Panel when the panel goes up in Angular

Issue

I am following the below question to display Dropdown little downwards..

Dropdown

How to check if the Dropdown Panel goes up like below...

Solution

If you have requirement like that, just go for margin set at the top and the bottom, this will ensure whether it opens up or down, it will get offset by a specified amount!

css margin docs

// apply space based on class
.custom-panel {
  margin: 25px 0px;
}
.custom-panel-2 {
  margin: 30px 0px;
}

// apply globally for all select
.mat-select-panel {
  margin: 25px 0px;
}

stackblitz

Answered By - Naren Murali