Skip to content

Commit

Permalink
fix(form-field): some input types taller than plain text input
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 angular#18787.
  • Loading branch information
crisbeto committed Mar 14, 2020
1 parent b5b3c8a commit a441998
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 a441998

Please sign in to comment.