Answered
Question about overriding the default z-index CSS for containers
Hey there,
I have a question about overriding the default z-index CSS for containers. In our defined theme, the default z-index is set to 300,000, which works well in most cases. However, for specific guide steps, we need to lower the z-index to 1000, while keeping the parent at 300,000 for other steps or guides.
I’ve tried adding the following CSS snippet in the guide's CSS section:
#pendo-g-6TmQhm6sCHbm9gNIPBIhJoSDGAY {
z-index: 1000 !important;
}
I also attempted targeting the parent #pendo-base and using parent classes like:
._pendo-step-container ._pendo-guide-tt_ ._pendo-guide-walkthrough_ { z-index: 1000 !important; }
It seems to work when inspecting with developer tools or designer tool, but as soon as I preview or publish the guide, the z-index reverts back to the default 300,000 set in the theme.
Any thoughts on how to make this change stick?
0
Comments
Couple of options to try: Make a new theme other than default with the z-index you want, and/or use ._pendo-step-container-styles as the target of your css on your block
Creating another theme with a newly defined z-index is far from an optimal solution, as there may be multiple popovers with varying z-index requirements.
Applying z-index to ._pendo-step-container-styles also proved ineffective.
I believe this is something the Pendo Product team should investigate and address in future feature releases.
That's too bad neither of those work for your situation! Did you also try putting your CSS that uses the guide ID into global CSS?
That actually did the trick! Thanks for the helpful hint - I really appreciate it. I’m curious if there are any more flexible ways to achieve this because I've seen a flexible option that is available but only for Badge Settings.
Well if you set your guide step theme to Custom, you can adjust each one individually. Then might be worth your time to save layouts with the z-index you know works well for different screens or scenarios :)
That worked, thanks for the help!
Please sign in to leave a comment.