Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markercluster group: popup is displayed under the other markers #34

Open
julien-deramond opened this issue Oct 22, 2021 · 1 comment · May be fixed by #161
Open

Markercluster group: popup is displayed under the other markers #34

julien-deramond opened this issue Oct 22, 2021 · 1 comment · May be fixed by #161
Labels
bug Something isn't working

Comments

@julien-deramond
Copy link
Member

Considering a markercluster group:

Screenshot from 2021-10-22 10-01-35

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

Screenshot from 2021-10-22 09-57-06

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
Copy link
Member

jacques-lebourgeois commented Oct 22, 2021 •
edited

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;
}

@julien-deramond julien-deramond added the bug Something isn't working label Dec 22, 2021
@louismaximepiton louismaximepiton linked a pull request Feb 21, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Popup: Fix z-index in any case louismaximepiton/IOT-Map-Component
2 participants
@julien-deramond @jacques-lebourgeois