How do I ensure that the input field is wide enough to fully display the content?

Question

I'm using the Vuetify TextField component in a table with many columns. Maybe the component contains too much content to display, and from a user experience perspective inspecting the content by scrolling within the field would take too much time if there are many cells.

Pure HTML example

Vuetify Example

My first thought (if you have a better idea please let me know) is to show a tooltip to show the full content, but this would be annoying if the component is capable of showing the full content. So I only want to show the tooltip when the content is hidden/truncated.

So is there a way to know if the component is showing the complete content, or if there is content that is hidden/truncated? (Table performance is important, so I don't know if it's worth doing very complex calculations when values ​​change)

I tried

(Playground)

<script setup>
  import { ref, watch } from 'vue'

  const field = ref()
  const msg = ref(
    'Hello World! too much content in this text field component to display.'
  )
  const isCuttingOff = ref(false)

  watch(
    msg,
    () => {
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! measure the input value here !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth < inputValueWidth
    },
    { immediate: true }
  )
</script>

<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field ref="field" label="fsfdsf" v-model="msg" />
    </v-container>
  </v-app>
</template>

But

• At startup, the variable inputWidth is undefined
• I don't know how to calculate the variable inputValueWidth

Answer 1

Use CSS to display overflow of text, such as .... (ellipsis), and use the title attribute to display the complete content on hover, similar to a pop-up window

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World! too much content in this text field component to display')
</script>

<template>
  <h1 :title=msg>{{ msg }}</h1>
  <input v-model="msg">
</template>

<style>
  h1{
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

Answer 2

By modifying your code, I successfully compared the clientWidth and scrollWidth of the textbox.

1- Eliminated field references.

2- Added an id to v-text-field.

3- Added a check function and called it in the watch callback function.

4- Inside the check function, I checked the clientWidth and scrollWidth of the input box.

5- In order to run it on initial load, I assigned msg to an empty string and changed it to the original string at the bottom of the script.

View here: here

<script setup>
  import { ref, watch } from 'vue'

  const msg = ref("")

  const isCuttingOff = ref(false)

  function check() {
    const elm = document.querySelector('#txt')
    isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    // todo : custom tooltip or any other solution for long texts
  }

  watch(
    msg,
    (currentMsg, oldMessage, callback) => {
      callback(check)
    },
    { immediate: true }
  )

  msg.value =
    'Hello World! too much content in this text cfield component to display.'
</script>
<script></script>
<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field id="txt" v-model="msg" />
    </v-container>
  </v-app>
</template>