Resource Center or Guide Badge Blocking Functionality / Finding the Largest Z-Index

If a Resource Center or Guide badge is sitting on top of an element on your page and blocking important content or the ability for users to interact with the element, a possible solution may be to adjust the z-index of the badge to hide it behind that element. 

Here are some steps you can take to identify the highest z-index value that exists on the page:

  1. Right click anywhere on the page
  2. Click "Inspect"
  3. Open your developer console by choosing the "console" tab
  4. Copy and paste the code snippet below next to the blinking cursor
  5. Hit enter on your keyboard

You can then use this value to decide the appropriate z-index of your badge (located in the styling tab of the visual designer).

function getMaxZIndex() {
  return Math.max(
    ...Array.from(document.querySelectorAll('body *'), el =>
      parseFloat(window.getComputedStyle(el).zIndex),
    ).filter(zIndex => !Number.isNaN(zIndex)),
    0,
  );
}
console.log(getMaxZIndex());

 

2

Comments

1 comment

Please sign in to leave a comment.

Didn't find what you were looking for?

New post