How to adjust the height of the Dropdown control in Angular

Question

I am using Angular, Angular Material and css

I am not able to decrease the height of the mat-select Dropdown and the text inside it is not vertically aligned.

<mat-select class="frequency-dimensions" formControlName="frequency" (change)="disableSubmitButton=false" disableOptionCentering panelClass="custom-panel-frequency">
  <mat-option value="daily" selected>Daily</mat-option>
  <mat-option value="total">Total</mat-option>
</mat-select>

In styles.scss

.custom-panel-frequency {
  margin: 34px 0px !important;  
  min-width: 100px !important;
}

In it's associated scss, it is defined as below..

.frequency-dimensions {
  min-width: 100px;
  width: 100px;
  vertical-align: middle;
}

How to adjust to the height of the Dropdown to approx 33px and the Dropdown aligning to the middle of the text and it's content being vertically aligned?

The Total Dropdown should be aligned properly with the date control as in the below picture

EDIT

When I decrease the height of the Dropdown to 25px, it comes as below...

When I play with margins then the Dropdown Panel goes away...

Finally I made the frequency-dimensions as below...

.frequency-dimensions {
  min-width: 100px;
  width: 100px;
  height: auto;
  min-height: auto;
}

With these changes, it looks large as below.. I just want to decrease the height without disturbing the panel.

I just want to decrease the height to 75% of the above Dropdown without disturbing its panel and it's content vertically aligned properly..

EDIT 2

With the new Answer, the Total Dropdown is bigger by 25% as below...which is not sync with the height of the Date Control box.

EDIT 3 When I decrease the height to 28px, it comes as below..

EDIT 4

With the new Answer, the Dropdown displays like below...

Any help would be greatly appreciated..

Answer 1

UPDATE

try changing the value of top to negative values in the below CSS and try to fix the issue! The stackblitz is wrong, but it demonstrates how to adjust the text to fit the container!

.frequency-dimensions {
  border: 1px solid black; // you can ignore this one line!
  height: 28px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
  position: relative;
  width: 100px !important;
}

.frequency-dimensions .mat-mdc-select-trigger {
  position: absolute;
  top:-2px;
}

Stackblitz Demo

---

The below CSS seems to do the job! but I used mat-form-field, since you have outline in your image!

css

.form-field-custom {
  display: flex !important;
  height: 33px !important;
}

.form-field-custom .mat-mdc-text-field-wrapper {
  height: inherit !important;
}

.form-field-custom .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
  height: inherit !important;
  display: flex !important;
}

.form-field-custom .mat-mdc-form-field-infix {
  padding: 0 !important;
  width: 100%;
  height: inherit;
  display: flex;
}
.frequency-dimensions {
  height: 33px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
}

html

<mat-form-field appearance="outline" class="form-field-custom">
  <mat-select
    class="frequency-dimensions"
    formControlName="frequency"
    (change)="disableSubmitButton=false"
    disableOptionCentering
    panelClass="custom-panel-frequency"
  >
    <mat-option value="daily" selected>Daily</mat-option>
    <mat-option value="total">Total</mat-option>
  </mat-select>
</mat-form-field>

Stackblitz Demo