vuetifyjs / vuetifyjs/vuetify

[Bug Report][3.7.18] Bad label positionning on NumberInput with split controls and outlined variant

Open
#21,134 1 comment 0 reactions 2 assignees View on GitHub

Nobody has claimed this yet.

C: VNumberInput T: bug
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Environment

Vuetify Version: 3.7.18
Vue Version: 3.5.13
Browsers: Chrome 134.0.0.0
OS: Linux x86_64

Steps to reproduce

Create a v-number-input with controlVariant="split" variant="outlined" :value="0" and ":min="0".

The label is positioned on the left of the input, over the "-" button. If the current value is the minimum value, the "-" button is disabled, and so the label appears half on a colored background, half on a white background, which feels weird.

Expected Behavior

I suppose the label position could be changed so the label appears over the input instead of over the "-" button (which is already the case for other variants)

Actual Behavior

The label is over the "-" button

Reproduction Link

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.