I am currently working on displaying a map within a container. I have successfully been able to display the map by setting its size to a specified number of pixels. However, my goal is to have the height of the map adapt to the size of the container dynamically. To achieve this, I had to set the height of all parent elements of the map container. After making these adjustments, the map appears "shadowed" and unclickable, as if it were positioned behind something. The only interaction available is zooming 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 outcome: