CODEWITHSUNDEEP
cssangular-materialinput-field
JtSOc
JtSOc

Reputation: 1

Text pushed upwards in inputefield Type Time with Angular V14.2.7

I'm facing the issue that we have a input field type time in which the text is pushed higher than in a normal input field. I'm aware of the fact that the root cause for this issue probably is the time picker icon coming with the input field, or at least i think it is whats causing all this. I was wondering if someone came up with a solution for this issue? Here a mini Version of my problem

I accessed the Icon over the input[type='time']::-webkit-calendar-picker-indicator selector and tried to set it either to display: none => removes it fromt the GUI but the increased input height persists font-size: 0.5em => thought i could make it smaller and bringt the input field back to its original height.

The closest to a satisfactory point i came was through
input { max-height: 1.125em; padding-top: 10px; } But with the input field now in line the containing text inside of the input fields of type time are vertically unalligned to their normal counterparts: Input field Type Time Normal input field

Is there a fix for it or will i have to enlarge every other input field to accomodate to this annomaly?

Upvotes: 0

Views: 49

Answers (1)

JtSOc
JtSOc

Reputation: 1

For anyone else wondering, i managed to bypass the issue through editing the positioning of the mat-underline with ::ng-deep .ClassOfYourInputfield .mat-form-field-underline { top: 2.775em; } This worked best without the appearance="fill" tag of the MatFormField as the Inputfields height remains too large. As this is only a workaround and probably not feasible for someone who wants the fill styling i'd let the question open.

Upvotes: 0

Related Questions