I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not seem to be effective. Below is my code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
<div id="main">
<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<div class="row">
<div class="col-md-4 columns"><a class="navbar-brand" href="">Crime Prediction</a></div>
<div class="col-md-1 columns">
</div>
<div class="col-md-2 columns">
<input data-date-format="dd/mm/yyyy" id="datepicker" class='bdate'>
</div>
<div class="col-md-2 columns">
</div>
<div class="col-md-3 columns">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-sm-12 map-block">
<div class="row">
<div class="col-sm-12">
<div id = "map" style="width:100%;height:100vh;">Hey</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 junk_charts" >
<div class="row">
<div class="col-sm-12" '>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
});
});
</script>
To create a dashboard view, I am using overflow:hidden in my parent div. Even though this is causing issues, it is necessary for my project. Are there any alternative solutions that can help me overcome this challenge? Here is a glance at my CSS:
body {
font-family: 'tahoma';
font-size: 14px;
overflow-y:hidden;
}
.navbar { padding: 0px 1rem;}
.navbar .navbar-brand {
font-size: 14px;
color:#000;
}
.navbar .row { width:100%; }
.navbar .row .columns { padding-top: 7px; }
.navbar .form-group { padding-bottom: 7px; margin-bottom: 0px; }
.navbar .form-group label { color: #000;}
.navbar .form-group select { padding: 3px; }
.map-block {padding-left:0px; padding-right:0px;}
.padd-top-20 { padding-top: 15px; }
.junk_charts {
background-color: silver;
position:relative;
overflow: scroll;
height: 700px;
}
Map code
var map = L.map('map').setView([41.85, -87.6298], 11);
// load a tile layer
L.tileLayer('https://api.mapbox.com/styles/v1/kuhugupta/cjo4txr7o02i12rn8pr2x1cji/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoia3VodWd1cHRhIiwiYSI6ImNpcDgxYmg1YzAxN2hzem5yaXRtaDN6dWYifQ.hAIOSatYipnZ-NnqodCQFg',
{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
username: 'XXXXX',
id: 'xxxxx',
tileSize: 512,
zoomOffset: -1,
accessToken: 'xxxxx'
}).addTo(map);