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

[Bug Report][3.7.5] VNumberInput has inconsistent padding styles #20782

Open
3dyuval opened this issue Dec 17, 2024 · 1 comment
Open

[Bug Report][3.7.5] VNumberInput has inconsistent padding styles #20782

3dyuval opened this issue Dec 17, 2024 · 1 comment
Assignees
Labels
C: VNumberInput T: bug Functionality that does not work as intended/expected

Comments

@3dyuval
Copy link

3dyuval commented Dec 17, 2024

Environment

Vuetify Version: 3.7.5
Vue Version: 3.5.13
Browsers: Chrome 131.0.0.0
OS: Linux x86_64

Steps to reproduce

I'm really digging the new VNumberInput
I've notice inconsistencies of v-prepend-icon padding in my app
Take a look at the repro

Expected Behavior

.v-field.v-field-prepended should give 12pxv

Actual Behavior

there is 0px padding in v-number-input

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Why this is called VNumberInput and not VNumberField?

@3dyuval
Copy link
Author

3dyuval commented Dec 19, 2024

I was playing around wit this yesterday and noticed the"spinner" (increment/decerement buttons) is occupying a prepend-inner slot, -append normally, -prepend if reverse applied.
My conclusion is that in the current setup, padding/margin for both user append-inner slot content AND a spinner content is not possible.
Is there anywhere in system a case where 2 inner slots are living one next to each other like in this design ?
A possible solution would be to seperate the spinner into a component that handles it's own padding and position, and remove it from occupying the slot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VNumberInput T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants