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.

Sign up for GitHub

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

Jump to bottom

On form floating inputs, the labels are not truncated anymore but they go outside the input box instead #39080

Open
3 tasks done
hanneswylaers opened this issue Aug 21, 2023 · 2 comments · May be fixed by #39720
Open
3 tasks done

On form floating inputs, the labels are not truncated anymore but they go outside the input box instead #39080

hanneswylaers opened this issue Aug 21, 2023 · 2 comments · May be fixed by #39720
Labels
css v5

Comments

@hanneswylaers
Copy link

hanneswylaers commented Aug 21, 2023 •
edited

Prerequisites

Describe the issue

In v5.3.0, when using a form floating input with a long label, the label is going outside of the the input field.
image

In v5.2, the label got truncated.
image

Reduced test cases

https://codepen.io/hwy/pen/mdayMmg

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.x
@hanneswylaers
Copy link
Author

It seems that in the latest version on form-floating>label there is a z-index:2; being added which wasn't there in earlier versions. Changing this back to width:100%; like before seems to solve it.

@roneymoon
Copy link

make sure you use the style property including the overflow: hidden; if even that doesn't work try using this
<label for="floatingInput" style="max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
this shall make sure your text stays inside the input box and doesn't overflow.

@louismaximepiton louismaximepiton linked a pull request Feb 29, 2024 that will close this issue
Open
10 tasks
@louismaximepiton louismaximepiton linked a pull request Feb 29, 2024 that will close this issue
Floating labels: Fix max-width and background-color #39720
Open
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v5
Projects
v5.3.4
Status: Needs review
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Floating labels: Fix max-width and background-color twbs/bootstrap
3 participants
@hanneswylaers @julien-deramond @roneymoon