table 中的 ng-Bootstrap 日期选择器弹出窗口未正确显示

Question

我在 table 中有一个 ng-bootstrap 日期选择器。 table 是网站布局清晰的必要条件。

如果我单击该按钮，弹出窗口仍显示为 table-高度。我尝试了很多，我知道我希望有人能为我提供解决方案。

<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

Answer 1

问题是 .table-responsive 使用 overflow-x: auto 这使得您的日期选择器只显示在 div.

中

解决方案是将 overflow: visible 添加到 #tbl1 以显示超出限制的日期选择器。

Here is 用这种方法更新的 plunker。

希望对您有所帮助！

table 中的 ng-Bootstrap 日期选择器弹出窗口未正确显示

ng-Bootstrap Datepicker popup in a table not showing correctly

ng-bootstrap

angular

ngb-datepicker