vuetifyjs/vuetify

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

Open

Aperta il 26 mag 2025

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)TypeScript (40.995 star) (7139 fork)batch import
C: VFieldE: roundedT: bughelp wanted

Descrizione

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.

Guida contributor

Tech stack
typescriptvuecss
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
basic CSSunderstanding of flexbox
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70
Direzione di ricerca
Esamina il codice sorgente di Vuetify per il posizionamento dell'etichetta nella variante outlined. Il problema identifica la classe .v field outline start con una proprietà flex basis che causa disallineamento. Controlla il link di riproduzione ed esamina il CSS in file come packages/vuetify/src/components/VField/VField.sass o simili. Considera se regolare flex basis o utilizzare proprietà di allineamento possa correggere la posizione dell'etichetta senza compromettere altre varianti.