Vuetify v-input and overflow animation

Question

I am trying to add an overflow animation to vuetify's v-text-field, yet I can not seem to get it to work:

<script setup>
  const text = 'very long long long long long text'
</script>

<template>
  <div class="container">
    <v-text-field v-model="text" />
  </div>
</template>

<style>
  .container {
    width: 200px;
  }

  .v-field__input {
    width: fit-content !important;
    overflow: visible;
    animation: leftright 3s infinite alternate ease-in-out;
  }

  .v-field__input > input {
    width: 260px;
  }

  @keyframes leftright {
    0%,
    20% {
      transform: translateX(0%);
      left: 0%;
    }
    80%,
    100% {
      transform: translateX(-100%);
      left: 100%;
    }
  }
</style>

(The above code can be edited here)

Whenever I set overflow to hidden of the class v-field__input the animation stops. I also have to manually set the width in pixels for the input tag. This, of course, should not be the solution, as it will be dependent on the input.

Ideally, I would like to have it behave like this: https://codepen.io/jonen/pen/oNQeoeP

Any ideas are greatly appreciated!

score 1 · Answer 1 · answered Jul 05 '23 at 16:22

you have to add overflow: hidden on the main/parent of input field, in your case it should be on class v-field__field :

<script setup>
  const text = 'very long long long long long text'
</script>

<template>
  <div class="container">
    <v-text-field v-model="text" />
  </div>
</template>

<style>
  .container {
    width: 200px;
  }

  .v-field__input {
    width: fit-content !important;
    animation: leftright 3s infinite alternate ease-in-out;
  }

  .v-field__input > input {
    width: 260px;
  }

  .v-field__field {
    overflow: hidden;
  }

  @keyframes leftright {
    0%,
    20% {
      transform: translateX(0%);
      left: 0%;
    }
    80%,
    100% {
      transform: translateX(-100%);
      left: 100%;
    }
  }
</style>

preview-result

Thanks, that works great! Any idea how to set the width of the input tag to dynamically fit the text? It currently is set to 260px but that should change depending on the input text. — jonen, Jul 05 '23 at 17:26

Vuetify v-input and overflow animation

1 Answers1