Positioning Popover with Dynamic Card Heights
In my Vue.js app, we have movies section. which displays
movieCards component depending on movies coming from an API. And where each movieCards component height varies based on its content, and movieCard's height dynamically adjusts based on its content, including movieName, duration, and categories. and there's a popover triggered by a button in the card's footer. Now, I need to move the popover to the top of each card, but since the card heights are dynamic, I'm not sure how to handle it.
Although the popover offers an offset option to adjust its placement, determining the appropriate offset value for dynamic heights remains a hurdle. like how much do I exactly need to change offset values so that it reaches to top of card ?
Any tips or resources would be helpful3 Replies
I see there are some specific issues positioning popovers.
Consider using a library https://floating-ui.com/docs/offset
Consider using a library https://floating-ui.com/docs/offset
offset | Floating UI
A JavaScript library to position floating elements and create interactions for them.
Hidde's blog
Positioning anchored popovers
Popovers are in the top layer, how can we position them relative to invokers that are not?
Thank you for sharing. I'll explore them as well 🙂