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

[Bug Report][3.7.4] Text-field Label Text Does Not Truncate Correctly When It Exceeds Width #20734

Open
phibzy opened this issue Nov 26, 2024 · 1 comment · May be fixed by #20736
Open

[Bug Report][3.7.4] Text-field Label Text Does Not Truncate Correctly When It Exceeds Width #20734

phibzy opened this issue Nov 26, 2024 · 1 comment · May be fixed by #20736
Labels
C: VInput VInput C: VLabel VLabel Component T: bug Functionality that does not work as intended/expected

Comments

@phibzy
Copy link

phibzy commented Nov 26, 2024

Environment

Vuetify Version: 3.7.4
Vue Version: 3.5.13
Browsers: Firefox 132.0
OS: Windows 10

Steps to reproduce

  1. Create text-field with maxwidth, or place inside element with width defined
  2. Add a very long string to label field of text-field

Expected Behavior

Truncates label text without overflowing

Actual Behavior

Label text overflows bounds of text-field

Reproduction Link

https://play.vuetifyjs.com/#...
@MatthewAry MatthewAry added T: bug Functionality that does not work as intended/expected C: VInput VInput C: VLabel VLabel Component labels Nov 26, 2024
@J-Sek
Copy link
Contributor

J-Sek commented Nov 26, 2024

Quick check in browser DevTools points to floating label override max-width defined in VField.sass and dates back 3 years. Not sure if we missed that for so long or was it some other change that caused this issue.

@J-Sek J-Sek linked a pull request Nov 26, 2024 that will close this issue
Draft
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C: VInput VInput C: VLabel VLabel Component T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(VField): floating label should respect paddings to avoid overflow J-Sek/vuetify
3 participants
@MatthewAry @phibzy @J-Sek