Problem:

Sometimes an element e.g. a modal or popup within an application when opened, covers a step or a launcher. When it happens, the solution is to increase the z-index value of the step or the launcher to be higher than the element covering it. But finding the right value of the element that is covering the step or launcher can be difficult sometimes. Here is how to find the right z-index value.



Instructions:


1) Open the element and launch the topic

Open the element that covers the step or launcher when the element is open. Make sure that the step is active and is now displaying behind the element.


2) Open the browser developer console

On the same page, open the browser developer console. You can do this by right-clicking on the web page and selecting the "Inspect Element" from the context menu. Switch to the "Console" tab within the developer console.


3) Paste the code snippet

Paste the code snippet below in the empty field of the "Console" tab


function maxZIndex() {

    return Array.from(document.querySelectorAll('body *'))
        .map(a => parseFloat(window.getComputedStyle(a).zIndex))
        .filter(a => !isNaN(a))
        .sort()
        .pop();
}
maxZIndex('body');


Press the "Enter" key on your keyboard after pasting the code. A figure should display immediately after. This is the maximum z-index value of all the elements currently displayed on that particular page.



Now you can set the z-index of the step or launcher to a value that is higher than the result you get from the above code snippet.