Skip to content

Commit

Permalink
fix(form-field): some input types taller than plain text input (#18825)
Browse files Browse the repository at this point in the history
Fixes the time, date etc. input types being taller than the plain text input by a couple of pixels due to the native input masking.

Fixes #18787.
  • Loading branch information
crisbeto committed Mar 21, 2020
1 parent 11536e4 commit e311791
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions src/material/form-field/form-field-input.scss
Expand Up @@ -61,15 +61,19 @@
visibility: hidden;
}

// Fixes an issue on iOS where the following input types will collapse to 1px,
// if they're empty, because we've overridden their background color.
// See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
&[type='date'],
&[type='datetime'],
&[type='datetime-local'],
&[type='month'],
&[type='week'],
&[type='time'] {
// Due to the native input masking these inputs can be slightly taller than
// the plain text inputs. We normalize it by resetting the line height.
line-height: 1;

// Fixes an issue on iOS where the following input types will collapse to 1px,
// if they're empty, because we've overridden their background color.
// See: https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios
&::after {
content: ' ';
white-space: pre;
Expand Down

0 comments on commit e311791

Please sign in to comment.