Edit Layers and Delete Layer pop-ups are visible but not clickable

[DrPDash]

• [x] I'm reporting a bug, not asking for help
• [x] I've looked at the documentation to make sure the behaviour is documented and expected
• [x] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• [x] I've searched through the issues to make sure it's not yet reported

---

How to reproduce

• Leaflet version I'm using: 1.3.1
• Leaflet Draw version I'm using: leaflet-draw-0.4.12 I also tried the latest version from CDN as follows, but the issue persists. <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
• Browser (with version) I'm using: Chrome Version 80.0.3987.149 (Official Build) (64-bit)
• OS/Platform (with version) I'm using: Windows 10
• step 1
• step 2

What behaviour I'm expecting and which behaviour I'm seeing

Minimal example reproducing the issue

• [x] this example is as simple as possible
• [x] this example does not rely on any third party code

Code parts are provided below, I do not have a jsfiddle for this.

I am using draw inside an external div, not on the map. The Edit/Delete options are visible, but not clickable (likely zIndex of the draw pop-ups):

In the example image below: 'Save' and 'Cancel' are visible but not Clickable on them. Where to change the zIndex or layer privilege for these?

Code: DrawOptions:

//////////////////////////////////////////////
// Custom elements for Draw (GIS)
drawnItems = new L.FeatureGroup();
var drawOptions = {
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    position: 'topleft',
    draw: {
        marker: {
            icon: new MyCustomMarker()
        },
        polyline: {
            shapeOptions: {
                color: '#000',
                weight: 1
            }
        },
        polygon: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
                color: '#e1e100', // Color the shape will turn when intersects
                message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
            },
            shapeOptions: {
                color: '#000',
                weight: 1
            }
        },
        circlemarker: false, // Turns off this drawing tool
        circle: false,
        rectangle: false // Turns off this drawing tool
    },
    edit: {
        featureGroup: drawnItems
    }
};
// End of Custom elements for Draw (GIS)
//////////////////////////////////////////////

Adding controls to an external div with id=giscalculations:

    // Draw Tool
    map.addLayer(drawnItems);
    ctlDraw = new L.Control.Draw(drawOptions).addTo(map);
    ctlDraw._container.remove();
    document.getElementById('giscalculations').appendChild(ctlDraw.onAdd(map));

Draw events:

// ________________________________________________________
// Draw events
// ________________________________________________________
    map.on(L.Draw.Event.CREATED, function (e) {
        var layer = e.layer;
        var type = e.layerType;
        drawnItems.addLayer(layer);
        if (type === 'marker') {
            // do something
        } else if (type === 'polyline') {
            // do something else
        } else if (type === 'polygon') {
            // do something else
        }
    });

[DrPDash]

Okay, I figured it out for the OPTIONS: "SAVE', 'CANCEL'. In project CSS, just include:

/ leaflet.draw style override /

.leaflet-draw-actions {
    z-index: 10000;
}

I have not figured out the selector for the moving toolTip, but that's relatively minor. So, closing the issue. Thanks