Skip to content
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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

theodorejb
Copy link

@theodorejb theodorejb commented Dec 11, 2023

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 using form-select-lg, such that this class is unusable with floating labels in all browsers (including Safari).

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • 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

@mdo
Copy link
Member

mdo commented Jan 9, 2024

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.

@theodorejb
Copy link
Author

theodorejb commented Jan 9, 2024

@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).

@theodorejb theodorejb force-pushed the fix-floating-select-label branch 4 times, most recently from 078a1c8 to 6e3eda4 Compare January 30, 2024 19:48
@theodorejb
Copy link
Author

theodorejb commented Jan 30, 2024

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.

louismaximepiton and others added 4 commits February 29, 2024 10:26
Only apply extra padding to textareas where it is needed, and use CSS variables to avoid duplicating complex selectors.
@theodorejb
Copy link
Author

I rebased this on top of #39720 since that was approved. I hope this can also make it into a bugfix release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Needs review
Development

Successfully merging this pull request may close these issues.

Floating labels select option text not fully visible BS5 - Floating Labels + Select - Text is cut off
4 participants