KPI not visible because of white container


my KPI is not visible because of another element is overlapping over it:


The container overlapping over it has the following code:

        "id": "htmWhi",
        "sticky": "top",
        "appearance": [
            "row": "1/2",
            "column": "1/7",
            "shadow": true

Code of the corresponding element contained in the container:

  "id": "htm_whi_ele",
  "type": "html",
  "styles": {
    "backgroundColor": "white"
  "config": {

    "html": "<div></div>"

Any ideas on how to prevent the container ‘htmWhi’ from overlapping over my KPI?

You should be able to prevent this by defining explicit z-indices for the container (basically tell any overlapping container which one is in the foreground).


See z-index - CSS: Cascading Style Sheets | MDN for background on the z index.


Thanks! Working fine now by setting the zIndex on the container of the KPI to zIndex:100


An alternative solution (which uses less code :wink: ) would be to move the container further down the list of containers. The containers seem to be drawn sequentially, which means that the last entry is on top of all others.

1 Like