twbs
Fix floating label text cut off in select elements
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.3 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 using form-select-lg, such that this class is unusable with floating labels in all browsers (including Safari).
- Demo: https://stackblitz.com/edit/bs-select-floating-label?file=index.html
- Screenshot:
Type of changes
- [x] Bug fix (non-breaking change which fixes an issue)
Checklist
- [x] I have read the contributing guidelines
- [x] My code follows the code style of the project (using
npm run lint) - [ ] My change introduces changes to the documentation
Live previews
Related issues
Fixes #33711, fixes #34147
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).
I changed the approach to use consistent padding for input and select elements, and only override it for textareas.
Note that the 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.
I rebased this on top of #39720 since that was approved. I hope this can also make it into a bugfix release.
Is there any chance this can be reviewed/merged? It fixes an important issue for select inputs with floating labels.