In my current Vue 3 / TypeScript / Quasar project, I have been exploring ways to ensure that all elements marked with the class .plan-item share the same height.
After delving into this challenge, I came up with the following code snippet:
const equalizeHeights = () => {
let tallestHeight = 0;
document.querySelectorAll('.plan-item').forEach((item) => {
const height = item.clientHeight;
if (height > tallestHeight) {
tallestHeight = height;
}
});
document.querySelectorAll('.plan-item').forEach((item) => {
item.setAttribute(
'style',
'min-height:' + tallestHeight.toString() + 'px;'
);
});
};
onMounted(() => {
equalizeHeights();
});
There has been an interesting quirk in my experience when implementing this code. At times, after saving and previewing the changes in the browser, it functions perfectly with all heights at parity.
However, upon refreshing the page, it seems to lose its effectiveness as the heights no longer align uniformly.
This inconsistency has prompted me to wonder why this occurs and how I can address it effectively. Any insights or solutions would be greatly appreciated!