KPI not visible because of white container

Apps (Frontend)
1

Hi,

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

image

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?

2

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).

image

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

2 Likes
3

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

image

4

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