Overflow hidden causes clipping, but container={document.body} makes positioning fail

[natew]

Just wondering, is this a known thing because documentation/issues seems to suggest not.

I would have expected the default behavior to use portals and position the popovers completely outside everything. Instead, it seems to render it inside at the parent scroll element.

But as is often the case scroll elements have overflow hidden, so 95% of our popovers fail.

I tried adding container={document.body} thinking that would solve it, but then all popovers appear all the way at the top left of the page, they seem to only add the offset relative to the element and none from the top left of the whole page.

Is this possible? Perhaps I'm missing passing something, I've tried a few variants. If so, it's a big gap in a popover library that otherwise seems well done.

[everweij]

Hi @natew, thanks for your question.

Basically, ToggleLayer has two positioning 'modes': the default one is absolute where ToggleLayer is trying to position the layer inside the parent (scroll) container while preventing the layer to overlap it's container. It sounds like the mode you're after is fixed https://www.react-laag.com/docs/togglelayer/#fixed, where the layers gets rendered in the end of the body. Both modes have their own use-cases :)

I hope this answers your question. Please let me know if things are not clear.

[rijk]

@natew we are rendering the popovers inside a portal. This way we have a container that is always on top, and not clipped by scroll. Maybe this could solve your issue as well.

<div id="react-root">
  <App />
  <div id="popovers" />
</div>

[natew]

Thanks for the help.