title: bootstrap 4 datepicker hidden behind the div
body: <p>I am using Bootstrap datepicker v4. The datepicker view gets hidden behind the div 'map'. I  tried adding overflow: visible but it does not seem to work. This is my code</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/&gt;
      &lt;link rel="stylesheet" href="./style.css"&gt;
      &lt;div id="main"&gt;
              &lt;nav class="navbar navbar-expand-sm bg-light navbar-dark"&gt;
                  &lt;div class="row"&gt;
                            &lt;div class="col-md-4 columns"&gt;&lt;a class="navbar-brand" href=""&gt;Crime Prediction&lt;/a&gt;&lt;/div&gt;
                            &lt;div class="col-md-1 columns"&gt;
                            &lt;/div&gt;
                            &lt;div class="col-md-2 columns"&gt;
                                  &lt;input data-date-format="dd/mm/yyyy" id="datepicker" class='bdate'&gt;  
                            &lt;/div&gt;
                            &lt;div class="col-md-2 columns"&gt;
                            &lt;/div&gt;
                            &lt;div class="col-md-3 columns"&gt;
                            &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class="container-fluid"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-8 col-sm-12 map-block"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;div id = "map" style="width:100%;height:100vh;"&gt;Hey&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 col-sm-12 junk_charts" &gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12" '&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
          $("#datepicker").datepicker({
  
          });
        });
      &lt;/script&gt;
  </code></pre>
  
  <p>In order to create a dashboard view I am using overflow:hidden in my parent div. I think that is creating an issue but I need that. Is there any work around?
  This is my CSS--</p>
  
  <pre><code>    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;
  }
  </code></pre>
  
  <p>Map code</p>
  
  <pre><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 &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
        maxZoom: 18,
  
        username: 'XXXXX',
        id: 'xxxxx',
        tileSize: 512,
        zoomOffset: -1,
      accessToken: 'xxxxx'
  
    }).addTo(map);
  </code></pre>