jquery - 固定オーバーフローを使用したテーブル内のブートストラップ日付時間ピッカー

Question

テーブル内のパネル内でbootstrap-datetimepickerを使用しています。そのテーブルには、結果に特定の高さを強制するための固定オーバーフローがあります。副作用は、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>