search

idoros / zeejs

Layering in HTML
MIT License
7 stars 0 forks source link

layer overlap implementation #4

Closed idoros closed 3 years ago

idoros commented 4 years ago

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:

FezVrasta commented 4 years ago

There's a plugin to make Popper handle the size:

https://www.npmjs.com/package/popper-max-size-modifier

idoros commented 4 years ago

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.

FezVrasta commented 4 years ago

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.

idoros commented 4 years ago

That's what I did 🙂

FezVrasta commented 4 years ago

Right, I didn't look at your code :-)

What's the problem you are having with this approach?

idoros commented 4 years ago

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.