Modal, SideBar, Page Header Z-Index Issue?

Development
#1

Hi I’m writing Blazor wrappers for patternfly components.

Here is the repository https://github.com/WildGums/Blorc.PatternFly.

But I’m running into an issue with Modal, SideBar, Page Header z-index.

There is no issue in the oficial demo website but is not working properly on my live demo http://blorc-patternfly.wildgums.com/components/modal.

image
image.png1886×867 88.4 KB

Can anyone help me to identify what I’m doing wrong?

To reproduce the issue just click the first Show Modal button.

Thanks in advance.

#2

Hi Alex, I had a look at the demo page and it looks like you got it working by disabling the z-index on the .pf-c-page__main element. The modal component is intended to be rendered outside of the .pf-c-page element in the DOM. If you look at the modal demo, you’ll see that the modal is appended to the <body> element. Are you able to do that with your implementation of this component?