vuetifyjs/vuetify
[Bug Report][3.8.6] Incorrect label positioning when using outlined variant and rounded
开放
#21,486 创建于 2025年5月26日
C: VFieldE: roundedT: bughelp wanted
仓库指标
- 星标
- (40,995 个星标)
- PR 合并指标
- (PR 指标待抓取)
描述
Environment
Vuetify Version: 3.8.6 Vue Version: 3.5.15 Browsers: Chrome 136.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
- Use a Vuetify input component (e.g., v-text-field).
- Set the variant prop to "outlined".
- Set the rounded to prop like "lg" or "sm" not the full rounded one.
- Add a label prop.
- Focus the input or enter text to trigger the floating label.
Expected Behavior
The floating label should align vertically with the input text and the outlined border.
Actual Behavior
The .v-field__outline__start class contains a flex-basis property, which causes misalignment with the input text.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
If this behavior is intentional, there should be an option to align the label correctly.