Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(input): fix input/placeholder alignment on safari #6072

Merged
merged 1 commit into from
Jul 31, 2017
Merged

fix(input): fix input/placeholder alignment on safari #6072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/lib/input/_input-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,11 @@
// we need to divide by the scale factor to make it half of the original text size. We again need
// to subtract off the line spacing since the mocks measure to the edge of the text, not the edge
// of the line.
$subscript-margin-top: 0.5em / $subscript-font-scale - $line-spacing;
$subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
// The padding applied to the input-wrapper to reserve space for the subscript, since it's
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
$wrapper-padding-bottom: 0.5em + ($line-height * $subscript-font-scale);
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;

.mat-input-container {
font-family: mat-font-family($config);
Expand Down Expand Up @@ -192,6 +192,12 @@
}
}

// <input> elements seem to have their height set slightly too large on Safari causing the text to
// be misaligned w.r.t. the placeholder. Adding this margin corrects it.
input.mat-input-element {
margin-top: -$line-spacing * 1em;
}

.mat-input-placeholder-wrapper {
top: -$infix-margin-top;
padding-top: $infix-margin-top;
Expand Down
1 change: 1 addition & 0 deletions src/lib/input/input-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ $mat-input-underline-height: 1px !default;
border: none;
outline: none;
padding: 0;
margin: 0;
width: 100%;

// Prevent textareas from being resized outside the container.
Expand Down