I’m using a Vuetify text-field component inside a table with many columns. It is possible that this component contains too much content to be displayed and from a UX perspective it takes too much time to check the content by scrolling inside the field if there are many cells.
My first idea ( please let me know if you know better ones ) was to display a tooltip showing the full content but this would be annoying if the component is able to display the full content. So I only want to display the tooltip if content would be hidden/cut off.
So is there a way to get to know if the component is displaying the full content or if something is hidden/cut off? ( Table performance is important so I don’t know if very complex calculations on value changes are worth it )
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
- on startup, the variable
inputWidth
is undefined - I don’t know how to calculate the variable
inputValueWidth
2
Answers
I managed to compare textbox’s
clientWidth
with itsscrollWidth
by modifying your code as below.1- Got rid of
field
ref.2- Gave
v-text-field
an id3- added a
check
function and called it inwatch
callback function4- inside
check
I checked input’sclientWidth
andscrollWidth
5- To get it to run in the initial load, I assigned an empty string to
msg
and changed it to the original string at the bottom of the script.Check it here
Using css to display the overflow of text like …. (ellipsis) and title attribute is used to show the full content on hover like popup