Hide Details

[Dinuz]

Current behavior

The country select field has the hide-details option not disabled and it is not controllable from the component props.

Moreover the class .vue-tel-input-vuetify has an align-items: center; prop.

Why this is an issue? Because when I use the hide-details prop on the component (e.g. auto), country and phone field get not aligned horizontally anymore.

Expected behavior

I expect that the country code select and the phone input are always horizontally aligned.

Proposed solution

(1) set hide-details="true" on the v-select (this will remove the country details).

This will align country and phone field horizontally except if the phone field has a showing details (e.g. error).

(2) remove the align-items: center; (and keep it as display: flex) from the class .vue-tel-input-vuetify

This will avoid the misalignment in case there is a showing detail (e.g. error).

(3) i would also add a prop to allow some margin and space between country code and phone number (optional)