layer overlap implementation
Closed this issue · 6 comments
Currently layer is overlapped on top a lower element using Popper.js with some unhandled cases.
There are several issues with Popper.js for the purpose it is used for; (1) it handles positioning elements next to other elements and not for overlap; (2) it doesn't handle size. So it is "extended" (or hacked 🙄) to handle the case.
ToDo:
- Check if it can easily be replaced with more minimal code.
- Optionally use
ResizeObserverfor resize
There's a plugin to make Popper handle the size:
Hey @FezVrasta, thank you for the input, it's amazing that you found this issue in the middle of nowhere 🤯
I saw that modifier in the documentation, but I needed something a bit different, and much simpler. I don't want the overlay to be next to the reference, I need it to simply overlap. so match the width and height of the reference and also be positioned on top of it (no overflow checking or nothing). you can see my Popper.js extension here.
To do that you could set the offset modifier to the popper width or height (depending by the placement), and then do something like the max-size modifier does, but for your requirements.
That's what I did 🙂
Right, I didn't look at your code :-)
What's the problem you are having with this approach?
No particular problem at this point, just merged the code and issued a reminder for my future self :)
The only thing missing in my current implementation is the resize observer that I will add at a future time. And a question if I need Popper as a dependency for this simple case, I would need it for it's more common purpose once I will implement actual UI components (tooltip, overcard, etc.), but I'm not sure if it will be part of this codebase at the moment.