CODEWITHSUNDEEP
htmlcssangularinput
Scott-MEARN-Developer
Scott-MEARN-Developer

Reputation: 392

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:

enter image description here

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:

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)

Upvotes: 1

Views: 34

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

You can set the variables of angular material, to suit your desired style.

There was a bug which caused the calendar icon to be hidden - github issue

To fix this we need display: block. Please try out the below CSS.

SCSS:

.custom-height {
  --mat-form-field-container-height: 30px;
  --mat-form-field-container-vertical-padding: 5px;
    .mat-mdc-input-element::-webkit-calendar-picker-indicator {
        display: block;
    }
}

HTML:

<mat-form-field appearance="outline" class="custom-height">
  <input matInput type="datetime-local" id="date" name="date" />
  <mat-error> some error </mat-error>
</mat-form-field>

Stackblitz Demo

Upvotes: 0

Related Questions