我在面板中的表格中使用引导日期时间选择器。该表有一个固定的溢出来强制结果达到一定的高度。副作用是 boostrap-datetimepicker 出现在顶部面板下方,我无法更改表格的溢出-y,因为它无法以固定高度滚动。
我尝试更改 widgetParent,但无法使其正常工作。
我知道如果我从表格中删除溢出管理,它可以工作,但表格也是它的全高......
这是html:
<div class="panel bg-light">
<div class="panel-header bg-blue">
<h3>Title</h3>
</div>
<div class="panel-content panel-with-table" style="position:relative; overflow-y: visible;">
<div class="fixed-overflow dispatch-list" style="position:relative; ">
<form action="/foraction" method="post" novalidate="novalidate">
<table class="table dispatch" style="overflow-y: visible;">
<tbody>
<tr class="status-row work-order-danger" style="position:relative; overflow-y: visible;">
<td colspan="4" class="status-cell" style="position:relative; overflow-y: visible;">
<div class="form-inline">
<div class="row">
<div class="form-group col-lg-3">
<div>
<div class="form-group" style="overflow-y: visible;">
<div class="input-group date datetimepicker-group success-tooltip" name="WorkOrderHeads[0].ScheduledDate_container" id="WorkOrderHeads_0__ScheduledDate_container" data-toggle="tooltip" style="overflow-y: visible;" title="" data-original-title="Choisir une date/heure...">
<input type="text" class="form-control" style="overflow-y: visible;" name="WorkOrderHeads[0].ScheduledDate" id="WorkOrderHeads_0__ScheduledDate" value="" placeholder="Choisir une date/heure...">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#WorkOrderHeads_0__ScheduledDate_container').datetimepicker({
locale: 'fr',
format: 'YYYY-MM-DD HH:mm',
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
},
showClose: true,
toolbarPlacement: 'bottom',
showTodayButton: true,
showClear: true,
stepping: 15,
tooltips: DateTimePickerTooltips
});
});
});
</script><span class="field-validation-valid text-danger" data-valmsg-for="WorkOrderHeads[0].ScheduledDate" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="panel-footer">
</div>
</div>
</div>