Solution:
Thanks to @Kalimah, here's a solution that works in
composition api & script setup<script setup>
const state = reactive({
meetCardHeight: 100
})
const element = ref(null)
const changeElementHeight = () => {
if (state.meetCardHeight !== element.value.scrollHeight) {
state.meetCardHeight = element.value.scrollHeight
} else {
state.meetCardHeight = 100
}
}
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" @click="changeElementHeight">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
This code will make the div expand to its full size with a smooth transition effect.
Original Question:
I'm trying to calculate the actual height of all text within this component, even though some parts are hidden due to overflow: hidden (using tailwind):
<script setup>
const state = reactive({
meetCardHeight: 100
})
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
The current height of the component is set to 100px to enable the overflow functionality. Is there a way to determine the total height that the h1 and p tags would occupy if there was no overflow constraint?