-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
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.
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
v5: Floating labels #30449
v5: Floating labels #30449
Conversation
Good news! Is it possible to add support for |
|
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. |
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
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this value be variable, as we do with $input-transition
?
Apart from that, seems fine!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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/