Unselectable text in div to selectable leaflet

Question

As the title says, I used this (Example) More specifically I used the info box in top right corner(US Population Density). I modified it to show me some more info onclick etc. Now I have a problem, this div is unselectable. I need to be able to select text (for copy text purpose), instead of selecting the text, it just moves the map. Is there a "quite easy solution" to it, because I can't find the right place. Maybe somehow in CSS?

.info {
        position: fixed;
        right: 0;
        bottom: 23px;   
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        /*-webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
        -webkit-user-drag: text;*/   /*Tried this, didn't work. */

    }
    .info h4 {
        margin: 0 0 100px;
        color: #777;
    }

Edit: I should add, when I start selecting on other div, then I can select it. As seen on picture, if I start selecting on div where my layers are shown, I can select text, but if I try to directly select from that div (on top right corner of picture) it moves map. I know picture is cut quite small, hope it gives the info/vision wha needed. Picture: http://www.upload.ee/image/3839164/asd.PNG

Thanks, Kristjan

There are event listeners on the map div, they catch mouse clicks. I can suggest 2 solutions: 1. Js: make a button ( or on click on info div) which will copy the text to the buffer. 2. Try to disable those listeners and add the default. — Mihey Egoroff, Jan 20 '14 at 09:22
http://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery — NoobEditor, Jan 20 '14 at 09:25

score 7 · Answer 1 · answered Aug 05 '14 at 15:30

7

Use disableClickPropagation in your controls onAdd method.

onAdd: function (map) {
    var container = L.DomUtil.create('div', 'my-custom-control');
    container.innerHTML += 'This is an example using disableClickPropagation.';
    L.DomEvent.disableClickPropagation(container);
    return container;
}

http://jsfiddle.net/9q756/1/

answered Aug 05 '14 at 15:30

brady321

1,475
13
14

This worked for me. Also I had to modify all of the CSS attributes with suffix ***-user-select: none;** – desperate man Jul 26 '15 at 13:40

score -1 · Answer 2 · answered Jan 21 '14 at 10:17

-1

You can fix this by re-enabling pointer-events on the bottom en top control-containers. These get set to none in leaflet.css:

https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L93

You need to overrule this in your own custom CSS:

.leaflet-top,
.leaflet-bottom {
    pointer-events: all;
}

answered Jan 21 '14 at 10:17

iH8

27,722
4
67
76

Tried it, didn't work. I should add, when I start selecting on other div, then I can select it. As seen on picture, if I start selecting on div where my layers are shown, I can select text, but if I try to directly select from that div (on top right corner of picture) it moves map. I know picture is cut quite small, hope it gives the info/vision wha needed. Picture: http://www.upload.ee/image/3839164/asd.PNG Thank you for answering anyway. – Ajudoonor Jan 21 '14 at 12:22
May you could supply a JSFiddle or Plnkr? – iH8 Jan 21 '14 at 12:44
Unfortunately no. This project contains info what i'm not allowed to share. – Ajudoonor Jan 21 '14 at 13:59

Unselectable text in div to selectable leaflet

2 Answers2