Skip to content

fix(input): Fix floating label width #689

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
hansl merged 7 commits into from
Jun 21, 2016
Merged

fix(input): Fix floating label width #689

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
12d1838
fix(input): Fix floating label width
jean-merelis Jun 15, 2016
d3bb9f6
transition width
jean-merelis Jun 15, 2016
1eca960
fix transition width
jean-merelis Jun 15, 2016
5d34583
fix transition width
jean-merelis Jun 15, 2016
e2deb54
moves the placeholder-scale-factor out into a variable
jean-merelis Jun 18, 2016
a60b3e2
move the variable to input.scss and removes calc function
jean-merelis Jun 21, 2016
8c20c1a
add overflow:hidden to the :host
jean-merelis Jun 21, 2016
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
4 changes: 3 additions & 1 deletion src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
visibility: visible;
padding-bottom: 5px;
transform: translateY(-100%) scale(0.75);

transition: width 150ms ease-in-out;
Copy link
Contributor

@hansl hansl Jun 15, 2016

Choose a reason for hiding this comment

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

So this will overwrite or be overwritten by the transition already on the .md-input-placeholder. The transition should be added to line 125 AND use material transition functions.

width: 133%; // 100/75 of the original space now available
Copy link
Contributor

@hansl hansl Jun 15, 2016

Choose a reason for hiding this comment

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

Instead of magic number, please use a scale constant and make the width 100% / placeholderScaleFactor.

Also please transition the width as well.

Copy link
Contributor Author

@jean-merelis jean-merelis Jun 15, 2016

Choose a reason for hiding this comment

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

It is not a magic number. It is just 100% / placeholderScaleFactor. 100/75=1.33

Copy link
Contributor

@hansl hansl Jun 15, 2016

Choose a reason for hiding this comment

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

What I'm saying is that this is a good time to move the 0.75 out into a variable and use that variable in the width calculation. This will clean up stuff and make it clear what the intent is. The comment 100 / 75 doesn't tell us anything about where 75 came from. Nor what is the purpose of 75.

Also, if we change the 0.75 scale, we can't possibly know what else to change.


.md-placeholder-required {
color: $md-input-required-placeholder-color;
}
Expand Down