This article reviews how to position badge icons in front of or behind other objects on the page by changing the Z-Index.
Product area: Guides (web)
Issue
There might be components of your application, like modals, pop-ups, or dropdown menus, which are positioned on top of other parts of the application. In these scenarios, it’s possible that you may see your Pendo badge icon in front of the component instead of behind it.
If you want to change the position of the badge icon so it's behind the component, you can adjust the Z-index.
Diagnosis
In the example below, the badge icon sits underneath a dropdown menu. When expanded, the dropdown menu has a Z-index value of 1000.
When the badge Z-index is set to 1100, it shows in front of the dropdown menu.
When the badge Z-index is set to 900, it stays behind the dropdown menu.
The element with the highest Z-index is positioned in the front.
Solution
For the badge to stay behind a dropdown menu, it must have a lower Z-index value than the menu.
You can find the Z-index of the dropdown menu by inspecting the element:
- Select the element to display a menu and select Inspect.
- Look for a Z-index value in the Styles or Computed windows.
If you can’t find a value for the dropdown menu, you can always lower the badge’s Z-index in intervals until you find a number that works.
To modify the Z-index value of the badge icon:
- Open the guide in the Visual Design Studio,
- Go to Activation Settings and select Edit Settings underneath Badge activation.
- Select the Styling tab to view and edit the Z-index of the badge.
Note: You can edit both the Z-index of the badge icon and the Z-index of the guide container. Making changes to the Z-index of the container has no impact on the position of the badge icon. Make sure you are modifying the correct object.
For more information about editing guides in Visual Design Studio, see the Getting started with the Visual Design Studio article.