Modal windows - header cut off on website

Knack Community
1

I have some modal windows in my apps. When I embed this onto a web page for use, with a standard header, the top of the model sits behind the top header of the website.

How do I either

  1. bring the model to the front (preferred)

or 2. Reposition the model further down the page so the header doesn’t obscure the top of the modal.

thanks

2

Screenshot 2022-11-14 20.48.07
Screenshot 2022-11-14 20.48.071057×796 59 KB

3

Hi,

In Knack’s CSS panel, set the “z index” property for the modal. Choose a number larger than the header i.e. You can choose a large number like 9999 assuming you want the modal to always be in front.

.kn-modal {
  z-index: 9999;
}
2 Likes
4

thanks, but that doesn’t seem to make any difference. The modal is still not on top.

I have raised a ticket with Knack support.

5

thanks, but that doesn’t seem to make any difference. The modal is still not on top.

Your header most likely has a larger z-index than 9999. In that case, set the z-index for your modal even larger. For instance on the WordPress “Divi” theme, the header has a z-index of 99999. See screenshot below:

Screen Shot 2022-11-16 at 10.15.29 AM
Screen Shot 2022-11-16 at 10.15.29 AM740×516 49.5 KB

In that case, you would need to set your modal z-index higher than 99999 i.e. 100000.

Alternatively, you could also lower the z-index of your header. That would achieve the same goal.

6

@GazM @KnackPros Gaz Just looking through some old posts to see if I can help. In this case doesn’t z-index only works if you have the appropriate position property? It looks like it’s being overwritten for the #main-header element.

Not a fan of sticking !important ruling on everything but this should make the z-index work. Otherwise you may need to find out what parent element has effected the position property for this.

Thanks and hope this helps

1 Like