Leaflet - Map "shadowed" and not clickable when size is set to a percentage

user_2550652 0
Viewed 56

I am trying to display a map on a container. I successfully display it when setting its size to a specific amount of px. However, I want the height to adapt to the container size. In order to do that, I had to set the height of every parents of the map container. Once done, the map appear "shadowed" and is not clickable, just as it was behind something. I can only zoom in and out.

HTML :

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div id="mapid"></div>
    </div>
    <div class="col-2" id="selection">
      //
    </div>
  </div>
</div>

CSS:

body {
    padding-top: 65px;
    margin: 0;
}
html, body, div {
    height: 100%;
    width: 100%;
}
#mapid { 
    height: 100%;
    width: 100%;
    align-self: center;
}

The result:

Result : map is grey and not clickable

leaflet css html
1 Answers

The culprit is most probably:

div {
    height: 100%;
    width: 100%;
}

...which looks to enlarge the Leaflet attribution control over your map container as well.

This explains the "shadow" effect and loss of interactivity.

Avoid such general selector for such layout styling.

user_51087960
Related