vuetifyjs/vuetify

[Bug Report][3.8.6] Incorrect label positioning when using outlined variant and rounded

Open

#21,486 opened on 2025年5月26日

GitHub で見る
 (2 comments) (0 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VFieldE: roundedT: bughelp wanted

説明

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

  1. Use a Vuetify input component (e.g., v-text-field).
  2. Set the variant prop to "outlined".
  3. Set the rounded to prop like "lg" or "sm" not the full rounded one.
  4. Add a label prop.
  5. 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.

コントリビューターガイド

技術スタック
typescriptvuecss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
fresh
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
basic CSSunderstanding of flexbox
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
70
調査方針
Look at the Vuetify source code for the outlined variant label positioning. The issue identifies the .v field outline start class with a flex basis property causing misalignment. Check the reproduction link and examine the CSS in files like packages/vuetify/src/components/VField/VField.sass or similar. Consider if adjusting flex basis or using alignment properties can fix the label position without breaking other variants.