Skip to content

fix(input): single-line hints overflowing the parent #4107

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

Merged
merged 2 commits into from
Apr 21, 2017
Merged

fix(input): single-line hints overflowing the parent #4107

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ff5a57
fix(input): single-line hints overflowing the parent
crisbeto Apr 15, 2017
89a5a1e
chore: revert variable
crisbeto Apr 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/lib/input/input-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@


$mat-input-floating-placeholder-scale-factor: 0.75 !default;
$mat-input-wrapper-spacing: 1em !default;
$mat-input-hint-min-space: 10px !default;

// Gradient for showing the dashed line when the input is disabled.
Expand Down Expand Up @@ -43,7 +42,7 @@ $mat-input-underline-disabled-background-image:
// Global wrapper. We need to apply margin to the element for spacing, but
// cannot apply it to the host element directly.
.mat-input-wrapper {
margin: $mat-input-wrapper-spacing 0;
margin: 1em 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why did you remove the constant?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the changes I did below, it was only being used in one place which makes it pointless.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we often prefer constants even if they're only used once since they describe what the value is supposed to represent.

// Account for the underline which has 4px of margin + 2px of border.
padding-bottom: 6px;
}
Expand Down Expand Up @@ -227,11 +226,14 @@ $mat-input-underline-disabled-background-image:
// Wrapper for the hints and error messages. Provides positioning and text size.
// Note that we're using `top` in order to allow for stacked children to flow downwards.
.mat-input-subscript-wrapper {
$line-height: 1.2em;

position: absolute;
font-size: 75%;
top: 100%;
width: 100%;
margin-top: -$mat-input-wrapper-spacing;
margin-top: -$line-height;
line-height: $line-height;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not change the line-height on .mat-input-container from normal to 1.2em instead of overriding here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to avoid breaking other parts of the input container since these changes are only relevant to the hints.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be ok, most browsers have normal = 1.2. Using 1.2 explicitly will make sure its consistent in all browsers

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since changing the one on the container causes other elements to overflow I'm fine with doing this

overflow: hidden; // prevents multi-line errors from overlapping the input
}

Expand Down