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
Fix floating label text cut off in select elements #39483
base: main
Are you sure you want to change the base?
Conversation
9f1c655
to
92122f1
Compare
Unfortunately I think these are somewhat arbitrary values that make our components a little more cumbersome to tweak. I'd rather see us go the route of an improved, balanced vertical padding for both top and bottom vs separate values for both. |
@mdo Do you mean using the same top/bottom padding for both selects and inputs? I tried that first, and while the new values do work fine for input elements, they do not work for textareas (it causes the label to overlap the textarea contents). |
078a1c8
to
6e3eda4
Compare
I changed the approach to use consistent padding for input and select elements, and only override it for textareas. Note that the 1px increase to line height is necessary to fix the floating label text cutoff issue for select dropdowns. For textareas it also makes the line height more similar to the default line height of 1.5 on textareas without floating labels. |
Only apply extra padding to textareas where it is needed, and use CSS variables to avoid duplicating complex selectors.
42efade
to
232b4a5
Compare
I rebased this on top of #39720 since that was approved. I hope this can also make it into a bugfix release. |
Description
Tweaks line height and padding so that letters with descenders will not be cut off when using a floating label on a
<select>
element.Motivation & Context
In Bootstrap 5.3.2 floating labels cause the bottom of some letters like j, g, p, and y to be cut off. This occurs with normal
form-select
dropdowns in Firefox and Chrome/Edge, and the problem gets significantly worse when usingform-select-lg
, such that this class is unusable with floating labels in all browsers (including Safari).Type of changes
Checklist
npm run lint
)Live previews
Related issues
Fixes #33711, fixes #34147