Всплывающее окно ng-Bootstrap Datepicker в таблице отображается неправильно

У меня есть средство выбора даты ng-bootstrap в таблице. Таблица нужна для наглядности на сайте.

Если я нажал на кнопку, всплывающее окно по-прежнему отображается, как высота таблицы. Я так много пробовал и знаю, что надеюсь, что у кого-то есть решение для меня.

<div id="tbl1" class="table-responsive" style="">
<table class="table table-sm" style="font-size: small">
    <tbody>
        <tr style="border: hidden">
            <td style="width: 25%">Contract begin</td>
            <td style="width: 25%">Contract end</td>
        </tr>
        <tr style="border: hidden;">
            <td>
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control form-control-sm" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
                            <div class="input-group-append">
                                <button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
                                    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </td>
            <td>2001-01-01</td>
        </tr>
    </tbody>
</table>

Demo in Plunker


person Sebastian K.    schedule 24.07.2018    source источник
comment
пожалуйста, добавьте больше информации по проблеме   -  person Inder    schedule 24.07.2018


Ответы (1)


Проблема в том, что .table-responsive использует overflow-x: auto, из-за чего ваш указатель даты отображается только внутри вашего div.

Решением было бы добавить overflow: visible к #tbl1, чтобы отображать средство выбора даты за пределами ограничений.

Вот обновленный плункер с таким подходом.

введите здесь описание изображения

Надеюсь, поможет!

person Rodrigo Ferreira    schedule 24.07.2018
comment
А, хорошо, это правда. Большое спасибо за помощь ???????? - person Sebastian K.; 24.07.2018
comment
overflow: visible удалит функцию прокрутки таблицы. Если в таблице много столбцов, это решение нарушит прокрутку. - person Bishan; 01.03.2019