Markercluster group: popup is displayed under the other markers

[julien-deramond]

Considering a markercluster group:

If I click on the bottom marker, its popup is displayed under the other markers:

---

Simulated in local mode (to have the latest version of IoT Map Component) with the following Knobs > markersList data:

{
    "id": "s1",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },
  {
    "id": "s1000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s2000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },

[jacques-lebourgeois]

Nb : if you first open and then close the popup of one of the markers on the top, then the marker will have an appropriate z-index (like from z-index: 1000411 to z-index: 411) and will be under the popup of the bottom marker.

You can have a quick fix with :

.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="z-index: 1000"] {
    z-index: 300 !important;
}

But it is a dirty quick fix. The click on a marker is not always easy as they all have the same z-index. The value of the z-index after having closing the popup is the real appropriate one.

Another quick fix using the width of an opened marker :

.leaflet-marker-icon.iotmap-divicon.leaflet-zoom-animated.leaflet-interactive[style*="width: 50px"]:not([style*='opacity: 0.3']) {
    z-index: 10000000 !important;
}