Overlay with portal not taking any vertical space

[JuanIrache]

Environment

• Package version(s): 3.25.0
• Browser and OS versions: Electron 8.2.3 (Chromium), Windows 10

Question

Hi, I'm new to this toolkit. It looks great.

If this is not the right place to ask, my apologies. Could someone point me to the right place? I am having some problems sizing/positioning an overlay.

<Overlay isOpen={isOpen}>
    My content
</Overlay>

If I leave it like that, the portal is attached to the body and takes 0 pixels vertically, so I have worked around this by assigning it a classname and forcing it to take the full screen:

<Overlay isOpen={isOpen} portalClassName="force-bottom">
    My content
</Overlay>

and

.force-bottom {
  bottom: 0;
}

Also, the contents appear behind the backdrop, so I had to bring them forward by giving them a high z-index in CSS. I also applied a backdropClassName to change the backdrop color to white.

This gets my problems solved, but it seems too hacky. What would be the official way of solving these problems?

Thanks

[adidahiya]

With layout/positioning issues like this it's best to provide a code sandbox (linked in the issue template) showing a minimal repro of your setup. What are you trying to do with Overlay? Are you sure you don't want a Dialog instead? What's the larger context here?

[JuanIrache]

Thanks @adidahiya . I've been trying to reproduce the issue in a minimal setup, but it only shows up in my more complex project, so it must be somewhere in my own CSS.

Regarding Overlay vs Dialog, the description in the documentation of Overlay fits better what I'm trying to achieve. I just experimented with Dialog and it creates additional elements I don't need, like a solid background.

I will close this.

[JuanIrache]

Update in case anyone else bumps into this:

My problem was that my content inside the Overlay component was not a div directly but another component. Then in the rendered HTML my content was not getting the bp3-overlay-content className, for some reason. I don't see why this should happen, as my content is composed of a div anyway, but I could solve it by just wrapping my component in a div.

I created a minimal example here: https://github.com/JuanIrache/blueprint-overlay-test/blob/master/src/renderer/App.js

I will reopen this just in case it's a bug.

[adidahiya]

It looks like Overlay clones its child element and applies a class to it, so if you supply a custom component, you will have to support the className prop accordingly and render out props.className to the DOM. This was a tradeoff made in #2205 to reduce the amount of DOM nesting in the component. I can see it being a little confusing, but at this point it is something you can work around and is probably not worth the breaking change in DOM layout.

[adidahiya]

The relevant code is here:

blueprint/packages/core/src/components/overlay/overlay.tsx

Line 312 in 2bee55f

React.cloneElement(child, {

[JuanIrache]

All good. Just reopened in case this was not under control. Thank you