v5: Floating labels #30449
v5: Floating labels #30449
Conversation
|
Good news! Is it possible to add support for |
|
It feels a bit odd to me that the label doesn't shrink when The input field is focused, it looks like you're going to type in text before the password text: I would prefer: Thoughts? |
|
mdo
force-pushed
the
v5-floating-labels
branch
from
855e2a2
to
50a6a16
Compare
|
Pushed some changes based on the code review and fixing some conflicts. Also made the change from @MartijnCuppens's suggestion and moved the label on Added textarea support too, @micka-fdz. Unsure about file inputs... those ones are more complicated. Could be an add-on in the future once this gets settled. |
mdo
force-pushed
the
v5-floating-labels
branch
from
50a6a16
to
ab6c6f9
Compare
|
Pushed some more updates to address @MartijnCuppens's comments. Wondering if there's some more I can do to make this more bulletproof. Happy to hear out any comments! |
|
This should be good to go now! Can I get a final review? |
- Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example
…ts more consistent - To do this, I made the .form-control and .form-select consistent in min-height vs height - Removed some unused variables now - Updated -color to be the -color because I don't know why this was any different before - Update page to include some examples for layout, validation, and value - Rewrite styles to not modify padding, but instead transform and opacity
- Apply some optimizations from code review - Removed unecessary properties from the label - Add some comments for what properties are required - Move from fixed height for labels to height 100% so we can support textareas - Improve docs a little bit, add ToC
…, update transforms
mdo
force-pushed
the
v5-floating-labels
branch
from
33a0a0c
to
e4f7f67
Compare
|
I think I don't like these big inputs (and with strange padding when they are empty). Something like in #30449 (comment) would be better. |
|
I agree, fields are currently much too big. |
|
#30449 (comment) would require an additional background to fix the border and shadow overlap
This will look weird if the parent element has another background Or if the background of the input is semi-transparent: But I can agree the input looks a little to big. https://getbootstrap.com/docs/4.5/examples/floating-labels/ might indeed be a better look as @micka-fdz suggests. |
|
Semi-transparent input is a rare-case that could be just unsupported by floating labels. The other label background issue I could live with if the padding-top was smaller (and maybe with rounded corners). Still I would prefer this over what's proposed in the PR. |
|
@mdo, in firefox 82 on linux the label animation has some issue. When you focus the input there are two steps of the animation visible, first the label moves up, then it's font size drops to even smaller. Maybe it's a firefox's transform/scale bug. Looks like when the text is moving it is blured then it sharpens. I don't see this in Chrome. |
scss/forms/_floating-labels.scss
Outdated
| pointer-events: none; | ||
| border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model | ||
| transform-origin: 0 0; | ||
| @include transition(opacity .1s ease-in-out, transform .1s ease-in-out); |
There was a problem hiding this comment.
Shouldn't this value be variable, as we do with $input-transition?
Apart from that, seems fine!
There was a problem hiding this comment.
Trying this on both Firefox & Chromium on Ubuntu, I can see a little font rendering jump (more obvious on Firefox). I guess it can be related to the font-stack I updated recently—already mentionned a related bug in #31955 by @MartijnCuppens.
That's unrelated to the PR I guess, I'd need more testing on those using our old font-stack and compare other possibilities… Opening an issue to track this. Edit: #31991
|
Hi @MartijnCuppens, what about my suggestion of inputs height? I think it’s a quick modification. Maybe can I help? |
Fixes #21312.
Preview: https://deploy-preview-30449--twbs-bootstrap.netlify.com/docs/5.0/forms/floating-labels/