引导角度日期选择器 ngbDatepicker 不会在 ngbPanelContent 上溢出

Posted 2023-03-06

【中文标题】引导角度日期选择器 ngbDatepicker 不会在 ngbPanelContent 上溢出

【英文标题】：Bootstrap angular datepicker ngbDatepicker doesnot overflow on the ngbPanelContent

【发布时间】：2019-06-25 15:14:27

【问题描述】：

我使用了如下形式的 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 没有溢出。尝试找到一些解决方案但无法解决。

【问题讨论】：

我在stackblitz.com/edit/angular-entwsq?file=app/app.module.ts 中做了一个简单的例子并开始工作。你用的是什么版本的 ng-bootstrap？

我正在使用 "@ng-bootstrap/ng-bootstrap": "^3.3.1",

【参考方案1】：

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

例子：

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

Github Link

【讨论】：

在这种情况下，通过滚动日期选择器也会移动。

【参考方案2】：

问题是手风琴卡溢出

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

 .accordion .card 
      overflow: visible !important;