Bootstrap angular datepicker ngbDatepicker 不会在 ngbPanelContent 上溢出

Question

我使用了以下形式的 ngbDatepicker

<ngb-panel>
              <ng-template ngbPanelTitle>
                <div class="row">
                  <ui-switch (change)="onChange($event,2)" [checked]="professionalLearningEvent.sportsPractive" size="small"></ui-switch>&nbsp;&nbsp;
                  <label class="accordianTitle" (click)="onAccordianTitleClick(2)">Will your sports practice be
                    affected ?</label>
                </div>
              </ng-template>
              <ng-template ngbPanelContent>
                <div class="container">

<div class="input-group">
  <input class="form-control" [formControl]="control" ngbDatepicker [dayTemplate]="getDayTemplate()" #d="ngbDatepicker" [ngClass]="{ 'is-invalid': isFieldInvalid(control) }">
  <div class="input-group-append">
    <button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

                </div>
              </ng-template>
            </ngb-panel>

日期选择器 UI 不会溢出。尝试找到一些解决方案，但无法找到。

Answer 1

问题是手风琴卡溢出

这是解决方案，只需添加以下 css 来覆盖引导 css

 .accordion .card {
      overflow: visible !important;
    }

Answer 2

添加container='body'到输入元素。

例子：

<input type="text" autocomplete="off" name="dp" ngbDatepicker container="body">

Github 链接