bootstrap 4隐藏在div后面的日期选择器

时间：2018-11-25 13:57:01

标签： jquery html css bootstrap-4 leaflet

我正在使用Bootstrap datepicker v4。 datepicker视图隐藏在div“地图”后面。我尝试添加溢出：可见，但似乎不起作用。这是我的代码

<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>

为了创建仪表板视图，我在父div中使用了overflow：hidden。我认为这是一个问题，但我需要。有什么解决办法吗？ 这是我的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;
}

地图代码

    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 &copy; <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);

2 个答案:

答案 0 :(得分：2)

传单生成的地图，具有z索引999和缩放按钮1000 所以你生成了datetimepicker div（bottom div） 默认的z-index = 1;

因此，只需将以下代码添加到css中，它将显示在地图顶部：

.datepicker {
  z-index:1001 !important;
}

（！重要此处将覆盖默认设置的CSS属性）

请参见以下工作片段：

$(function() {
  $("#datepicker").datepicker({

  });


  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 &copy; <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);

});
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;
}

.datepicker {
  z-index:1001 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
   
<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>

答案 1 :(得分：0)

将container =“ body”属性添加到日期选择器

 <input container="body" data-date-format="dd/mm/yyyy" id="datepicker" class='bdate'>
相关问题
最新问题