Text Cut Off When Reducing Height of <input> with datetime-local Type in Angular Material

I'm trying to decrease the height of a date input in Angular Material using the height property like so:


<mat-form-field appearance="outline">
<input formControlName="dateInput" matInput type="datetime-local" id="date" name="date" style="padding: 0px !important; height: 19px;" />
<mat-error>
<app-error-message [control]="lessonDateMode ==='individual' ? lessonForm.controls['dateInput'].errors : null"></app-error-message>
</mat-error>
</mat-form-field>

However, when I apply this, the text inside the input field gets cut off, as shown in the image:



As you can see, there should be plenty of room for the text. I want to keep the current text size and reduce the input's height, but the text gets cut off even though there appears to be enough room for it.

Things I've tried so far:

• Setting the padding to 0
• Adjusting the line-height
• Setting the box-sizing to border-box

This issue only occurs with inputs of type datetime-local. I can reduce the height of other input types without any problem.

How can I reduce the input's height without the text being cut off (without changing the font-size)

Continue reading...