Floating labels: Add an artificial background to label #37125
Conversation
louismaximepiton
force-pushed
the
main-lmp-floating-label-textareas
branch
from
bbc175f
to
c068e71
Compare
| @@ -1001,6 +1001,7 @@ $form-floating-padding-x: $input-padding-x !default; | |||
| $form-floating-padding-y: 1rem !default; | |||
| $form-floating-input-padding-t: 1.625rem !default; | |||
| $form-floating-input-padding-b: .625rem !default; | |||
| $form-floating-label-height: 1.875em !default; | |||
There was a problem hiding this comment.
Maybe we should use a calc function or some math here to get the 1.875em?
There was a problem hiding this comment.
Actually, I've chosen this value arbitrarily, it "feels right" to me. Open to any thoughts here!
There was a problem hiding this comment.
Oh well the math works out perfectly lol. $form-floating-height is about 3.5rem (not including border), the top padding is 1.625rem, so 3.5-1.625=1.875. 😅
But since the math is a little janky because of the border additions, I'm inclined to ship as-is.
|
Hello, I noticed that a disabled floating label looks pretty bad due to this change: |
|
Could you please create a dedicated issue for that @AgentSmith0? |
|
Any idea when this will be released? The problem exists on latest 5.3 as of 4 Feb 2023. Thanks! |
|
True, this issue seems to appear again. See here: https://twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/#disabled |
|
@louismaximepiton @mdo could you please cross-check? The fix mentioned still works - so not sure if this change was never published or something caused this change to be reverted. Thanks a ton! |
|
Hey Saranglakare, AgentQmith0, Just pushed a PR fixing this issue, thanks for raising a flag here ! |
Fixes #32800.
Here is a proposal for floating labels in textareas.
Solution
Patchwork of many comments/solution wrote in #32800. I tried to not add an extra class but it might be harder to maintain, I let you decide what would be better here.
Checks
Live preview
https://deploy-preview-37125--twbs-bootstrap.netlify.app/docs/5.2/forms/floating-labels/#textareas