search

paul-thebaud / v-phone-input

International and accessible phone input for Vuetify 3 and Vue 3.
https://paul-thebaud.github.io/v-phone-input/
MIT License
65 stars 6 forks source link

question: country input height and hiding details #22

Closed Minotti closed 10 months ago

Minotti commented 10 months ago

Expected Behavior

Screenshot 2024-01-17 at 19 20 09

As can you see, the demo preview works perfectly.

Actual Behavior

Error 1. With option enableSearchingCountry enabled: Screenshot 2024-01-17 at 19 20 03 The height is incorrectly and has gray background instead white.

Error 2. With defaults options: Screenshot 2024-01-17 at 19 27 40 The height keep still incorrect, but background are normal.

And another thing, how can i remove messages below input? In Vuetify is a property hide-details, but here i didn't found out.

Steps to Reproduce the Problem

  1. Follow instructions
  2. Enable country search to see Error 1
  3. To reproduce error 2 only keep default options on createVPhoneInput

Specifications

Best regards

paul-thebaud commented 10 months ago

Hi @Minotti, looks like you are not using the latest version of Vuetify. This could lead to this height problem. Please confirm here if it fix your problem.

Don't known about the background, but it looks OK on the demo (for all input styles). This other style problem might comes from your own styles.

Finally, as stated by the docs, "You can also pass the Vuetify VTextField and Vuetify VSelect props": so you can just use hide-details on the field. Keep in mind that hidding error message is bad for accessibility as users won't get a feedback on what's wrong with their input (some users may not even know about the error if the only flag for it is the input border color).

Minotti commented 10 months ago

Hello @paul-thebaud , thanks for reply.

I will try upgrade vuetify version and i believe is that.

About background, It makes sense to be something here in my project, after all, I bought a template.

Thanks for that.