0

我在面板中的表格中使用引导日期时间选择器。该表有一个固定的溢出来强制结果达到一定的高度。副作用是 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>
4

0 回答 0