Z index breaks my guide.
I have a bug that prevents me from continuing on a guide I created. The guide appears but hides under the backdrop. I tried fixing it and changing the Z-index but nothing helps.
1
I have a bug that prevents me from continuing on a guide I created. The guide appears but hides under the backdrop. I tried fixing it and changing the Z-index but nothing helps.
Comments
Hi Matan,
Thanks for posting on the Community. It seems the Pendo guide is being displayed under a backdrop from their application. Unfortunately, there isn't an easy one size fits all solution to this. Modifying the z-index on its own may not be sufficient to position the guide, depending on how the backdrop is structured.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
You may have to work with a developer on your side to take a closer look at the backdrop that is interfering w/the Pendo guide.
But why? the backdrop is the backdrop from Pendo! If I check with inspect mod, I can see that the backdrop and the tooltip are both at the same Z-index....
This issue also affects us, as the z-index is customisable, but the backdrop z-index is not. The backdrop z-index should be automatically calculated by pendo as z-index minus 1.
We have the same issue and agree with andrew.kirwin (z-index minus 1!) Example: We need to set the z-index to 9999 to get guides to go under our static top nav however any z-index under 200,000 puts the guide behind Pendo's own backdrop. We need a way to set the backdrop z-index independently. At least from the theme if not on the individual container level.
Pendo support was able to help me out with this. In the theme's supplemental style section, you can set the z-index of the backdrop to be 1 less than the guide value or anything you want.
Would be nice to have a bit more control over this feature in the designer, but this worked for us.
We had this same problem with the pendo z-index/backdrop. We have a provisioning modal that must appear above everything else, including Pendo guides, so we needed to adjust the z-index of the guides AND the backdrop. Took some experimenting to get it right, but you can set the z-index of the backdrop in the supplemental styles (toggle "Advanced Options" on to see this section) like this: ._pendo-backdrop { z-index: 9000 !important; }. but replace 9000 with your desired z-index. It didn't work for me without the !important;
Confirming that we tried this and it worked for us on the first go of simply using the supplemental styles to make the z-index of the backdrop lower than the guide container.
Please sign in to leave a comment.