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.

Sign up for GitHub

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

Jump to bottom

[Bug Report][2.6.3] Broken label in outlined input with a prepended icon #14661

Closed
flosca opened this issue Jan 28, 2022 · 1 comment · May be fixed by #14666
Closed

[Bug Report][2.6.3] Broken label in outlined input with a prepended icon #14661

flosca opened this issue Jan 28, 2022 · 1 comment · May be fixed by #14666
Labels
C: VTextField VTextField T: bug Functionality that does not work as intended/expected

Comments

@flosca
Copy link

flosca commented Jan 28, 2022

Environment

Vuetify Version: 2.6.3
Vue Version: 2.6.11
Browsers: Chrome 97.0.4692.99
OS: Windows 10

Steps to reproduce

  1. Create any input component, e.g. v-text-field with an outlined style and with a label.
  2. Via v-slot:prepend-inner put an icon in the input with v-if condition for showing this icon
  3. Create a button that would toggle the condition

Expected Behavior

Prepended icon should disappear, label of an input remains still.

Actual Behavior

Prepended icon does disappear, but label is shifted to the left.

Reproduction Link

https://codepen.io/flosca/pen/podJWKB
@KaelWD KaelWD added C: VTextField VTextField T: bug Functionality that does not work as intended/expected and removed S: triage labels Jan 28, 2022
@Florent-Bouisset Florent-Bouisset mentioned this issue Jan 29, 2022
Open
8 tasks
@hollote
Copy link

hollote commented Feb 22, 2022

Have a similar issue, with the prepend-inner slot and the outlined style label being shifted to the left.
Снимок экрана 2022-02-22 в 13 26 42
When changing layout (change width of browser) it re-calculates label position correctly.
Снимок экрана 2022-02-22 в 13 27 35

Probably the fix for this issue can fix this error also.

@KaelWD KaelWD mentioned this issue Jul 7, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C: VTextField VTextField T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(VTextField): adjust label offset with prepend icon Florent-Bouisset/vuetify
4 participants
@hollote @flosca @johnleider @KaelWD