0

My popup from the marker is overlapping, making it partially visible. I need to move the popup above.

enter image description here

enter image description here

Code:

<Marker
  draggable={draggable}
  eventHandlers={eventHandlers}
  position={position}
  ref={markerRef}
>
  <Popup>
    <span onClick={toggleDraggable}>
      {draggable && <Button>Click Here</Button>}
    </span>
  </Popup>
</Marker>

I also tried access the popup component, but that breaks the popup.

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    margin-bottom: 30px;
}

enter image description here

Sai Krishnadas
  • 2,863
  • 9
  • 36
  • 69

1 Answers1

1

A hack to get around it:

.leaflet-popup {
    padding-bottom: 30px; /* adjust as you see fit */
}
Conman_123
  • 471
  • 3
  • 9