bootstrap3 datetimepicker div截止日曆

我希望日曆顯示在.row div之外，但div必須同時具有兩個滾動條。bootstrap3 datetimepicker div截止日曆

如果div有溢出popierty切斷日曆。我嘗試設置widgetParent身體，但日曆的位置是錯誤的。不接近輸入。

<div class="container"> 
    <div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: scroll;"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' style="width: 40px;" class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

example

來源

2017-08-31 ShutDown

問題是什麼？您希望日曆顯示在.row div之外，因此用戶不必滾動？ – petryuno1

exacly，我想日曆出現在.row div – ShutDown

-1

更改.row的溢出 'show'。所以：

<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: show;">

來源

2017-08-31 18:04:21 petryuno1

之外這不能解決我的問題，因爲我需要滾動條。請參閱示例，我更新了它。 – ShutDown

$(function() {     
 
       $('#datetimepicker1').datetimepicker(); 
 
       // $('#datetimepicker1').datetimepicker({widgetParent: 'body'}); 
 
      });

.row{ 
 
    position:relative; 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
    height: 200px; 
 
    overflow: show; 
 
} 
 

 
.row #datetimepicker1{ 
 
    position:absolute; 
 
    z-index:10001; 
 
    top:20px; 
 
    right:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker1'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

儘量不要寫內嵌CSS，而是你可以給類，然後在這個類寫CSS。

這是一樣的，你正在尋找？

希望這會有所幫助。

來源

2017-08-31 18:17:15

感謝提示，但我只用內聯CSS來舉例，我知道這是錯誤的做法。這不能解決我的問題，因爲我需要滾動條。請參閱示例，我更新了它。 – ShutDown

bootstrap3 datetimepicker div截止日曆

回答

相關問題