fix(input): Fix floating label width #689
Conversation
Fix floating label to resize the width to use all available space
googlebot
added
the
cla: yes
|
You should keep in mind that this will cause an overflow on IE and Edge. They don't consider the scale when determining whether to overflow the parent. |
jean-merelis
changed the title
jean-merelis
changed the title
| @@ -34,7 +34,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, | |||
| visibility: visible; | |||
| padding-bottom: 5px; | |||
| transform: translateY(-100%) scale(0.75); | |||
|
|
|||
| width: 133%; // 100/75 of the original space now available | |||
There was a problem hiding this comment.
Instead of magic number, please use a scale constant and make the width 100% / placeholderScaleFactor.
Also please transition the width as well.
There was a problem hiding this comment.
It is not a magic number. It is just 100% / placeholderScaleFactor. 100/75=1.33
There was a problem hiding this comment.
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.
| @@ -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; | |||
There was a problem hiding this comment.
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.
|
@crisbeto: I think in those case we'll see the same behaviour as before this change, which is fine by me (for now). |
|
We had a similar issue on Material 1, even though the label is scaled down to 75%, IE/Edge still consider it as if it was 100%. Then when you set it to 133% it overflows. See angular/material#8116 |
|
@hansl are you able to see if this is an issue in IE / Edge? |
| @@ -20,6 +20,9 @@ $md-toggle-padding: 8px !default; | |||
| // Width and height of input toggles | |||
| $md-toggle-size: 20px !default; | |||
|
|
|||
|
|
|||
| $md-input-floating-placeholder-scale-factor: 0.75 !default; | |||
There was a problem hiding this comment.
Variables that are specific to a single component should live in that component's SCSS.
Just move this to the file where it's used.
|
Re IE/Edge I haven't had a chance to get my Windows Machine up last week. Will check it out tomorrow on a local VM. |
|
I'm installing a VM to test this on IE 11. Will come back when done. |
|
This seems to be working fine on IE11. Syncing up with Robert for more info. Proof: |
|
@crisbeto: ^ seems to work correctly. If you have something to add before we merge this in :) Please note our DOM is largely different than Material 1, and much simpler/less reliant on hacks due to Shadow DOM and compartmentalization. |
|
As soon as we clarify the situation with IE11/Edge I'll merge this in. :) |
|
I'll try cloning it to check as well. |
|
Alright, it works as it is now, but it starts overflowing if the any of the parents get
|
|
Interesting. By putting @jean-merelis: Can you add |
|
Yeah I'd say that setting a default overflow would be fine, since it's up to the end user to determine whether to override it in that case. |
|
Thanks Kristiyan. Sorry if this was such a mess, but better be right the first time :) After discussion with @robertmesserle seems like this is the right solution. I'll merge it as soon as Travis finishes. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Fix floating label to resize the width to use all available space.
Fixes #688