Popover in modal appear behind modal

UI Builder
1

We’re using the Popover UI component from the Backendless Marketplace — it’s based upon popovers in React-Bootstrap and is very, very useful :heart:

However, in a modal it doesn’t quite work: the popover content appears behind the modal (instead of on top). Undoubtedly, something to do with its z-index… the modal content is positioned “fixed” with large z-index. I would expect the popover content to be positioned relative to its parents (inside the modal), but this doesn’t appear to be the case. Anybody have any insight about making popovers work inside of a modal?

2

Hi @Alex_Klein,

Can you give us the steps to reproduce and a simple example so we can reproduce it ourselves and give you a solution?
Also, please provide us with a screenshot of what it looks like in your app

Regards
Nazar

3

@Alex_Klein,

I was able to reproduce it, but unfortunately, it is not possible to do it now. I have created an internal ticket to resolve this issue. We will inform you as soon as it is resolved.
As a temporary solution, we can offer you to increase the z-index in your styles:

.bl-customComponent-popover.popover {
  z-index: 500;
};

Regards
Nazar

5

Hi Nazar, thank you for considering this issue. I have prepared a simple demo page here.

Some explanation(s):

The modal is constructed according to the recipe in this Backendless modal tutorial, so the CSS for the modal parts are described in that article.

The content of the modal is simply a block (blue background), inside of which I placed the Popover component. In the Popover, the popoverTarget is an icon button (triangle icon). The popoverContent is a paragraph.

For the “Mouse out event” of the Popover, I close the Popover after a 3 second delay, so you can see things more easily. Clearly, the popoverContent is behind the modal content, even though the Popover component is inside of the modal content.

Any help is much appreciated :pray:

6

Hi Nazar,

Thank you — increasing the z-index to >1000 (1000 is the z-index of the modal component) works. I think we’re good with this solution :sunglasses:

Thank you again!

7

Hi @Alex_Klein,

We have released a new version of the Popover component with a fix for the issue.
Please, could you confirm that this issue does not appear?

Regards
Nazar

8

Thank you :heart:

1 Like