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>
答
更改.row的溢出 'show
'。 所以:
<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: show;">
+0
之外这不能解决我的问题,因为我需要滚动条。请参阅示例,我更新了它。 – 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。
这是一样的,你正在寻找?
希望这会有所帮助。
+0
感谢提示,但我只用内联CSS来举例,我知道这是错误的做法。 这不能解决我的问题,因为我需要滚动条。请参阅示例,我更新了它。 – ShutDown
问题是什么?您希望日历显示在.row div之外,因此用户不必滚动? – petryuno1
exacly,我想日历出现在.row div – ShutDown