我使用
bootstrap date time picker.它与日期和时间选择工作正常.但问题是能见度.如果我把它放在任何类型的容器外面,模态是可见的.但是如果我试着把它作为一个td放在一个表中,那么模态是不可见的.我创建了一个
jsfiddle,说明了相同的内容.
我已经浏览了上面提到的网站的css文件,并尝试设置大小,z-index等.但没有任何作用.
请帮我设置z-index或其他解决方案以提高可见性.
<div class="panel panel-info" style="margin-top: 1%">
<div class="panel-heading" id="JnName">Date Picker</div>
<div class="panel-body">
<form name="form3" role="form">
<div class="table-responsive" style="size:auto; max-width: 100%;">
<table class="table table-bordered table-striped" id="System Analysis">
<tbody>
<tr>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-4">
<div class="Box">From Date:</div>
</div>
<div class='col-sm-8'>
<div class="form-group">
<div class='input-group date' id='rptDateFrom'>
<input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false" value='' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#rptDateFrom').datetimepicker({
//viewmode: 'months',format: 'DD/MM/YYYY',widgetPositioning:
{
horizontal: 'left',vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-6">
<div class="Box">From Time [HH]:</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='cboFromTime'>
<input type='text' name='cboFromTime' class="form-control" id='cboFromTime' onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#cboFromTime').datetimepicker({
//format: 'HH:mm'
format: 'HH',vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
解决方法
改变溢出-y：隐藏;溢出-y：可见;
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: visible; // Add overflow-y visible
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
