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.6.12] Extra top padding in number input control #20134

Closed
kingyue737 opened this issue Jul 10, 2024 · 3 comments
Closed

[Bug Report][3.6.12] Extra top padding in number input control #20134

kingyue737 opened this issue Jul 10, 2024 · 3 comments
Assignees
@yuwu9145
Labels
C: VNumberInput P: high The issue is of high importance T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke

Comments

@kingyue737
Copy link
Contributor

Environment

Vuetify Version: 3.6.12
Last working version: 3.6.11
Vue Version: 3.4.31
Browsers: Edge 126.0.0.0
OS: Windows 10

Steps to reproduce

Seem to be a regression caused by #20064

Expected Behavior

image

Actual Behavior

image

While centerAffix can be a workaround, it will force single-line.

Reproduction Link

https://play.vuetifyjs.com/#...
@yuwu9145 yuwu9145 self-assigned this Jul 12, 2024
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected C: VNumberInput T: regression Something that used to work but we broke P: high The issue is of high importance and removed S: triage labels Jul 12, 2024
@mschoeffmann mschoeffmann mentioned this issue Jul 13, 2024
Closed
@yuwu9145
Copy link
Member

VNumberInput is built on top of VTextField, and increment/decrement controls are placed in append-inner & prepend-inner slots, so I'm actually thinking to just apply centerAffix in VNumberInput.

In my opinion, labels look better with single-line applied, what do you think?

https://play.vuetifyjs.com/#eNrNVl1PwjAU/Su1iYkmDvyIPuAk8dE/oA9iTFkv0Fjapu0mhPDfvR0I48uJIOxhydpze+/pudvJfR1RZ5P6ozG1LAXaoLGHvpHMQ7OlCImziBmTv+aLRCvPhAI73co3rf6cLadRkuDjHlr0rkULGKK92+aL8D2SgPJgI9bpiEFcx92FqCxSab+NuFAm9UWIYGblrZbPzAqmPNZwniUfwFt0Ma7dDUS0xYghSKk/lwMka4NEtCOkXD3u0kAN4dNlpNETHJ4CsXCYSQcrEUI52IhmM+brKxelKSLNuL6oy/41+5YkVRysxEZvr+r+1NlMogIK6dQfW59NFCqgjkMJfv9DHVCzdcT+oleAkPPWvoc9W6hHzkSfdbGLBAbeMmIY50J1ideGCEcwAvj5//jjz/ZX2pNj+WMlXLD8iuXf9I4uWAGv27XRpRqVeV1lHe2AyqwSW1FlDuZQ0bfCej6/TdDiiBd2JhNgXC9MhrHzQwnEJdoAzwMbHMCc1bKoI0Dy93c8BIpjfcx0TkaT/FN3i9DdGuSSnIi+0dbjPe4DPg5F8sSYkY4vVCrlBb2p3dWurunbF//WCUU=

@kingyue737
Copy link
Contributor Author

The issue is that applying centerAffix causes the label to disappear, which is a breaking change. Users who want the label to remain visible need to add an additional label either in front of or above the input to indicate what the number inside the input represents.

@yuwu9145
Copy link
Member

Found a way to fix without changing any behaviour

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yuwu9145 yuwu9145

Labels
C: VNumberInput P: high The issue is of high importance T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yuwu9145 @kingyue737