z-index not working after grafana update

[usugrad]

In a previous release of Grafana, and I mean previous like Grafana 8, we were using the html graphics panel for years wiht the z-index set to 100. We then created a more elaborate navigation menu that would overly over the panel when someone hovered and could select their link to another dashboard. This was working perfect, then we updated to grafana 12. Now the dropwdown menu is hidden behind any panels that are directly below it.
Is there any setting in the root css or css that might fix this? Such that the navigation menu will again show up on top of other panels?

Here is a copy of our current implementation:

{
    "calcsMutation": "standard",
    "reduceOptions": {
        "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
        ]
    },
    "add100Percentage": false,
    "centerAlignContent": false,
    "overflow": "visible",
    "useGrafanaScrollbar": false,
    "SVGBaseFix": false,
    "codeData": "{\n  \"text\": \"Random text\"\n}",
    "rootCSS": "",
    "css": "body {\nfont: 12px Arial,Helvetica,sans-serif;\n    font-style: normal;\n    font-variant-ligatures: normal;\n    font-variant-caps: normal;\n    font-variant-numeric: normal;\n    font-variant-east-asian: normal;\n    font-stretch: normal;\n    font-size: 15px;\n    line-height: normal;\n    font-family: Arial, Helvetica, sans-serif;\n}\n\n.navbar {\n  overflow: visible;\n  background-color: black;\n  z-index: 1000;\n}\n\n.navbar a {\n  float: left;\n  font-size: 16px;\n  color: white;\n  text-align: center;\n  padding: 14px 16px;\n  text-decoration: none;\n  z-index: 1000;\n  overflow: visible;\n}\n\n.dropdown-content {\n  overflow: visible;\n  display: none;\n  position: absolute;\n  background-color: white;\n  min-width: 200px;\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n  z-index: 1000\n}\n\n.dropdown {\n  float: left;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.dropdown .dropbtn {\n  font-size: 16px;  \n  border: none;\n  outline: none;\n  color: white;\n  padding: 14px 16px;\n  background-color: inherit;\n  font-family: inherit;\n  margin: 0;\n  z-index: 1000;\n  overflow: visible;\n}\n\n.dropdown a {\n  font-size: 12px;  \n  overflow: visible;\n}\n\n.navbar a:hover, .dropdown:hover .dropbtn {\n  background-color: #cc5500;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.dropdown-content a {\n  float: none;\n  color: black;\n  padding: 12px 16px;\n  text-decoration: none;\n  display: block;\n  text-align: left;\n  overflow: visible;\n  z-index: 1000\n }\n\n.dropdown-content a:hover {\n  background-color: #ddd;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.dropdown:hover .dropdown-content {\n  display: block;\n  position: absolute;\n  overflow: visible;\n  z-index: 1000;\n}\n\n\n",
    "html": "</BR>\n<div class=\"navbar\">\n   \n  <a href=\"LINK/d/8ubDxlsGz/overview?orgId=1\">Home</a>\n \n <div class=\"dropdown\">\n   <button class=\"dropbtn\">Application \n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_self\" href=\"LINK/d/P6fSF2wGz/inline?orgId=1\">INLINE</a>\n<a target=\"_self\" href=\"LINK/d/8MBQ-2wMk/cfm?orgId=1\">CFM</a>\n<a target=\"_self\" href=\"LINK/d/lJSB-tyMk/fdc-kn-summary?orgId=1\">FDC KN</a>\n<a target=\"_self\" href=\"LINK/d/eMoDlbsGz/fdc-trace-summary?orgId=1\">FDC TRACE</a>\n<a target=\"_self\" href=\"LINK/d/imphQxsGk/facilities?orgId=1\">FACILITIES</a>\n<a target=\"_self\" href=\"LINK/d/sLtdxd3Mz/pdwh?orgId=1\">PDWH</a>\n<a target=\"_self\" href=\"LINK/d/t6_j-WmHk/cpdwh-wfr?orgId=1\">cPDWH WFR</a>\n<a target=\"_self\" href=\"LINK/d/CnEpPpsGz/yoda-dashboard?orgId=1\">YODA</a>\n<a target=\"_self\" href=\"LINK/d/sxhcfEtIk/dmw?orgId=1\">DMW</a>\n<HR>\n<a target=\"_self\" href=\"LINK/d/lNxpO7qGk/sort?orgId=1\">SORT</a>\n<a target=\"_self\" href=\"LINK/d/OvFp4zs4k/sort-stats?orgId=1\">SORT STATS</a>\n<a target=\"_self\" href=\"LINK/d/lNq4lhCMk/wet?orgId=1\">WET</a>\n<a target=\"_self\" href=\"LINK/d/EysLwvyVk/wet-stats?orgId=1\">WET STATS</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Infrastructure\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_self\" href=\"LINK/d/02mlngyMz/ec2?orgId=1\">EC2</a>\n<a target=\"_self\" href=\"LINK/d/R3bQulR7z/ecs?var-Environment=PROD&orgId=1\">ECS</a>\n<a target=\"_self\" href=\"LINK/d/i9sNE0yMkkk/emr?orgId=1\">EMR</a>\n<a target=\"_self\" href=\"LINK/d/0JnDPqEGz/rds?orgId=1\">RDS</a>\n<a target=\"_self\" href=\"LINK/d/4OsfF3PMz/s3?orgId=1\">S3</a>\n<a target=\"_self\" href=\"LINK/d/fp1DDwEMk/sqs?orgId=1\">SQS</a>\n<a target=\"_self\" href=\"LINK/d/zl7gYatIk/redshift-metrics?orgId=1\">REDSHIFT</a>\n<a target=\"_self\" href=\"LINK/d/gEyDLABSz/open-search?orgId=1\">OpenSearch</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">On-Premise\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_self\" href=\"LINK/d/jqWeOOl4k/on-premise?orgId=1\">ON-PREM MAX LATENCY</a>\n<a target=\"_self\" href=\"LINK/d/qQgLvv9nk/oracle?orgId=1\">LATENCY DETAILS</a>\n<a target=\"_self\" href=\"LINK/d/k1Fb8mjnk/nec-monitoring?orgId=1\">NEC MONITORING</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Data Ingested\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_self\" href=\"LINK/d/8jWh5KS7z/data-ingested-by-data-source?orgId=1\">DATA INGESTED BY DATA SOURCE</a>\n<a target=\"_self\" href=\"LINK/d/3kjV6FS7k/ingestion-dashboard?orgId=1\">INGESTION DASHBOARD</a>\n<hr>\n<a target=\"_self\" href=\"LINK/d/QYJfeqPVz/ma_di_pipelines?orgId=1&from=now-1h&to=now\">MA INGESTION PIPELINES</a>\n<a target=\"_self\" href=\"LINK/d/le8wvN57z/cpdwh-load_status?orgId=1\">PDWH PIPELINE LATENCY</a>\n<a target=\"_self\" href=\"LINK/d/JgqqSYeVk/streamsets-pipeline-status?orgId=1&from=now-15m&to=now\">STREAMSETS PIPELINE STATUS</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Alerts\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_self\" href=\"LINK/d/VFL2PlyGk/alert-dashboard?orgId=1\">ALERTS</a>\n<a target=\"_self\" href=\"LINK/d/sLtdxd3Mz/pdwh?orgId=1\">MONITORS-ALERTS-pDWH</a>\n<a target=\"_self\" href=\"LINK/d/9CQPWD_7z/monitors-alerts-sortwet?orgId=1\">MONITORS-ALERTS-SORTWET</a>\n<a target=\"_self\" href=\"LINK/d/6IEX55cVk/stats?orgId=1\">BLACK BIN ALERTS</a>\n<a target=\"_self\" href=\"LINK/d/rmwnxqVNk/sort-runs-not-updated?orgId=1\">SORT Runs Not Updated</a>\n<a target=\"_self\" href=\"LINK/d/RGDWAiLIk/pdwh-data-quality?orgId=1&from=now-7d&to=now\">PDWH Data Quality</a>\n<a target=\"_self\" href=\"LINK/d/_d4YYE2Vk/space-postgres?orgId=1\">SPACE POSTGRES</a>\n\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Support\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_blank\" href=\"LINK/:w:/s/CloudyPythonicAwesomeness/EfEprXfPetZIvceqGA9CtIoBV6HyXKS73uJlJMk2wtFTLg?e=ZQLO59\">USER GUIDE</a>\n<a target=\"_blank\" href=\"mailto:test@globalfoundriestest.com\">CONTACT US</a>\n<a target=\"_blank\" href=\"LINK/l/channel/LINK\">TEAMS SUPPORT CHAT</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Incidents\n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_blank\" href=\"LINK/$pa_dashboard.do?sysparm_dashboard=48254b131b2a919400a163936b4bcb88&sysparm_tab=bb3503531b2a919400a163936b4bcba0&sysparm_cancelable=true&sysparm_editable=false&sysparm_active_panel=false\">DnA Data Operations Dashboard</a>\n<a target=\"_blank\" href=\"LINK/$pa_dashboard.do?sysparm_dashboard=d65113d6db06701420b770a7f496191d&sysparm_tab=398197d6db06701420b770a7f4961952&sysparm_cancelable=true&sysparm_editable=undefined&sysparm_active_panel=false\">DnA CLOUD INCIDENTS</a>\n<a target=\"_blank\" href=\"LINK\">SERVICENOW</a>\n </div>\n</div>\n\n<div class=\"dropdown\">\n   <button class=\"dropbtn\">Quick Links \n      <i class=\"fa fa-caret-down\"></i>\n    </button>\n \n <div class=\"dropdown-content\">\n<a target=\"_blank\" href=\"LINK/d/pKsUiQtmk/inline-metrics?orgId=1\">Oracle Inline Metrics</a>\n<a target=\"_blank\" href=\"LINK/d/fgJkYGAik/sort-metrics?orgId=1\">Oracle SORT Metrics</a>\n<a target=\"_blank\" href=\"LINK/d/uoI6BMAiz/wet-metrics?orgId=1\">Oracle WET Metrics</a>\n<a target=\"_blank\" href=\"LINK/d/61BNl4jMz/cloudmonitoringroadmap?orgId=1\">Cloud Monitoring Roadmap</a>\n<a target=\"_blank\" href=\"LINK/adfs/ls/IdpInitiatedSignOn.aspx\">AWS</a>\n<a target=\"_blank\" href=\"LINK/sn/dashboards/4879002e-87f3-4ee4-a699-d1722024e852\">\nAWS QUICKSIGHT</a>       \n<a target=\"_blank\" href=\"LINK/monitor/index.php/search/lookup?query=fc8saph%25&var-Process_Stats=All\">\nOP5 SERVER HOST MONITORING</a>\n<a target=\"_blank\" href=\"LINK/display/PD/pDWH+Development+Home\">PDWH Support Docs</a>\n<a target=\"_blank\" href=\"LINK/\">ZABBIX</a>\n</style>\n  </div>\n</div>\n\n\n",
    "renderOnMount": true,
    "onRender": "// Sets the value from the first series on every refresh\nconst htmlgraphicsValue = htmlNode.getElementById('htmlgraphics-value');\n\nif (htmlgraphicsValue) {\n  htmlgraphicsValue.textContent = data.series[0].fields[1].state.calcs.last;\n}\n",
    "panelupdateOnMount": true,
    "dynamicHtmlGraphics": false,
    "dynamicData": true,
    "dynamicFieldDisplayValues": false,
    "dynamicProps": false,
    "onInitOnResize": false,
    "onInit": "// Sets the text from customProperties\nconst htmlgraphicsText = htmlNode.getElementById('htmlgraphics-text');\n\nif (htmlgraphicsText) {\n  htmlgraphicsText.textContent = customProperties.text;\n\n  // Change the text color based on the theme\n  if (theme.isDark) {\n    htmlgraphicsText.style.color = 'green';\n  } else {\n    htmlgraphicsText.style.color = 'red';\n  }\n}\n\nfor (const sheet of document.styleSheets) {\n  const constructedSheet = new CSSStyleSheet()\n  for (const rule of sheet.cssRules) {\n    constructedSheet.insertRule(rule.cssText);\n  }\n  htmlNode.adoptedStyleSheets.push(constructedSheet)\n}"
}

Updated to format the json code section in a code block

[psheehymn]

We had the same issue (we had also developed a nav menu dependent on temporarily overlaying the panels below). We got a solution from Grafana that makes it work again when put in the main body of the JS code:

// Z-INDEX FIX - all panels will have a greater Z-index than those below
// Get all panels
const panels = [...document.querySelectorAll('.react-grid-item')];
// Set the ending Z-index value to one more than the number of panels
let zIndex = panels.length + 1;
// Loop thru the panels backwards, set the Z-index and decrement
for (const panel of panels) {
panel.style.zIndex = zIndex--;
}

[usugrad]

We had the same issue (we had also developed a nav menu dependent on temporarily overlaying the panels below). We got a solution from Grafana that makes it work again when put in the main body of the JS code:

// Z-INDEX FIX - all panels will have a greater Z-index than those below
// Get all panels
const panels = [...document.querySelectorAll('.react-grid-item')];
// Set the ending Z-index value to one more than the number of panels
let zIndex = panels.length + 1;
// Loop thru the panels backwards, set the Z-index and decrement
for (const panel of panels) {
panel.style.zIndex = zIndex--;
}

Hi, after grafana update to.12.3.1 this fix is no longer working. By any chance did you get another update from the grana team?

[psheehymn]

Yes, I recently got this updated version from Grafana when I encountered the same issue. Note the panelPosition variable has to be set to the panel's position in the dashboard for the new code to have an effect.

// Z-INDEX FIX - all panels will have a greater Z-index than those below

// Set panel position on dashboard starting from 0 for the first position
const panelPosition = 1;  
// Get all panels
const panels = [...document.querySelectorAll('.react-grid-item')];
// Set the ending Z-index value to one more than the number of panels
let zIndex = panels.length + 1;
// Loop thru the panels backwards
for (const panel of panels) {
  // set the Z-index and decrement
  panel.style.zIndex = zIndex--;
  if (panels[panelPosition]) { 
    const navSection = panels[panelPosition].querySelector('section'); 
    if (navSection) { 
      navSection.style.overflow = 'visible'; 
    } 
  }
}

[usugrad]

Thanks again, worked like a charm!

[usugrad]

OMG, that worked, thanks so much @psheehymn!