search

visdesignlab / data-hunch

Deployment for Data Hunch Demo. In this demonstrator, we show some ideas how data hunches could be recorded and visualized, on top of but distinct from data visualizations.
BSD 3-Clause "New" or "Revised" License
1 stars 0 forks source link

Issues with Pop-Up Menu #27

Closed alexsb closed 2 years ago

alexsb commented 2 years ago

There are sometimes clipping issues:

image

And here it suddenly appears not as a floating menu, but as part of the layout:

image
alexsb commented 2 years ago

I see these clipping issues also for annotation menus and for the context menu. It's actually making it impossible to do quite a few things. Are you doing all of these by hand? Could you use a reasonable context-menu implementation / floating menu implementation instead?

alexsb commented 2 years ago

Here's a recommendation by @puehringer :

Context-menus need to behave the same way as modals, popovers, ..., i.e. they need to be above everything else. One way is by hacking around with z-index, but the generally accepted solution is to mount a new node on the very bottom of body, and render everything in there with absolute positioning. That way, you won't run into these clipping issues. Popper and nearly all other libraries solve it like this. In React, it is useful to use createPortal to avoid the complex page-flow that comes with that.

haihan-lin commented 2 years ago

absolute positioning doesn't work when you have combination of svg and divs. divs on top of divs are easy, but divs cannot be on top of svg, you need foreignObject for that.

haihan-lin commented 2 years ago

or at least I remember it is like so the last time I did something similar

haihan-lin commented 2 years ago

maybe it is just z-index itself doesn't work with SVG. looks like absolute positioning does. I can change it to absolute positioning since part of code use it already