Feature request: Dropdown position auto based on container rather than viewport

Beta
#1

Maybe there is already a way of achieving this, but I am putting together a image hotspots component, and I would like the dropdowns to be auto positioned to fit within the image container div, rather than based on width of viewport or scroll depth.

Currently, the dropdowns flow out of the image container:

image
image2250×1434 477 KB

And I would like for a way to use the auto position to keep it within the image div:

image
image2094×1144 328 KB

Is there already a way to do this by adding some CSS to the container? Or would it need to be a feature added to the dropdown js?

Thanks!

#2

For some additional info, here is the structure of this Image with Hotspots component:

image
image590×616 13.1 KB

The image sets the size, with the Hotspots div positioned absolute to fill the container.
The hotspot items are then dropdowns positioned accordingly (via % to scale with the image)

#4

That’s a good idea. However I’m not sure how’d we control which container to use though without a way to select elements on the page like I describe here Feature request: link type control - open a modal on click . I’ll think on it. Have a great day.

#5

Ah yes that’s a good point.

Short of a way to target dynamic elements on the page, would specifying an ID to act as the container work?
A little more manual to set up, but for this sort of thing it might work