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.

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

Add "persistent-placeholder" Prop #68

Open
IOIIOOIO opened this issue Jan 3, 2022 · 1 comment
Open

Add "persistent-placeholder" Prop #68

IOIIOOIO opened this issue Jan 3, 2022 · 1 comment

Comments

@IOIIOOIO
Copy link

IOIIOOIO commented Jan 3, 2022

Is your feature request related to a problem? Please describe...

I can't use the persistent-placeholder prop, which is normally available for Vuetify inputs.

@IOIIOOIO
Copy link
Author

IOIIOOIO commented Jan 4, 2022

After forking this repo and attempting to fix it myself I found that Vuetify needs to be updated to ^2.5. I'd be happy to assist but would need direction since I don't have the scope to know what the ramifications of the update could be.

For anyone else having this issue, I used the following CSS. This works for me since we use persistent-placeholder on all our inputs.

Globally, in a .scss file:

.v-text-field .v-label {
	transform: translateY(-18px) scale(0.81) !important;
}

Alternatively, you can do it scoped by wrapping the vue-tel-input-vuetify in Vue component:

<template>
	<vue-tel-input-vuetify class="c-tel-input"
				           v-bind="$attrs"
					   v-on="$listeners"
					   v-model="phone">
		<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
			<slot :name="slot" v-bind="scope"/>
		</template>
	</vue-tel-input-vuetify>
</template>

<script>
	export default {
		name: "LTelInput"
	}
</script>

<style lang="scss" scoped>
	.c-tel-input {
		&::v-deep {
			.v-label {
				transform: translateY(-18px) scale(0.81) !important;
			}
		}
	}
</style>

Usage:

<l-tel-input  v-model="phone"></l-tel-input>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant