Vuetify: Text fields prefix show error

[nuintun]

Versions

0.15.2

When text fields set prefix option:

Reproduction Link

https://codepen.io/anon/pen/QMRBBN

[johnleider]

Due to how the label is constructed, I'm not sure if this can be supported. You may have to forgot the label and use placeholder instead.

[roryprimrose]

Just hit this one too and was about to raise an issue. Codepen at https://codepen.io/anon/pen/boVWYX

[peluprvi]

And the label's left space got wrong too if you add a placeholder: https://codepen.io/anon/pen/gGrGwo

[nuintun]

@johnleider I think can hidden the prefix and suffix when the text fields is empty ~

[johnleider]

@nuintun That might have to be the solution to this for the short term.

[Maxhodges]

another reproduction link
text-field label should make room for :prefix content
https://codepen.io/maxhodges/pen/EojwPV?editors=1010

Select a country. CountryCode is prepended to the phone text field, but it collides with the label. I think the label should move out of the way (up or over) for prepended text.

[Maxhodges]

oddly the label DOES move out the way in the docs

[Maxhodges]

here's how I'm dealing with it for now

Use placeholder for a label, then on text entry placeholder is replaced with a label

  <v-text-field prepend-icon="phone" placeholder="Phone Number" :label="phoneNumber ? 'Phone Number' : ''" :prefix=" country ? country.countryCode : '' " v-model="phoneNumber "></v-text-field>

[johnleider]

This issue has been resolved as of 0.17 branch.

[builder7777]

either the issue re-appeared or has not been resolved

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.