Question

我正在 Angular 8.0.4 中创建Web应用程序，并且正在使用 @ ng-bootstrap / ng-bootstrap 5.0.0-rc.0 。

我正在遵循documentation来创建一个具有可滚动内容的模式。现在，内容不滚动，页脚被隐藏。

我像这样打开模态：

const modalRef = this.modalService.open(ModalInventoryComponent, {
      size: 'xl',
      scrollable: true
    });

模式模板：

<div class="modal-header d-flex justify-content-between">

  <h4 class="modal-title">{{mySupermarket.name}}</h4>

  <button type="button" class="close" aria-label="Close (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>

</div>

<div class="modal-body">

  <!-- I have 4 Tables like this one -->
  <div class="container-fluid">
  <div class="row">
    <div class="col-sm-1">
      Example
    </div>
    <div class="col">
      <h6>Product</h6>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">Number</th>
            <th scope="col">Name</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let inv of inventories">
              <th scope="row">{{inv.number}}</th>
              <td>{{inv.name}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

</div>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss('close click')">Cerrar</button>
</div>

我已经在组件CSS中尝试过

.modal-body {
  overflow-y: auto;
}

我看到了使用CSS添加固定高度的解决方案，但是，我有4个长表，我希望模态具有尽可能高的高度。

关于堆叠闪电战的演示：https://stackblitz.com/edit/angular-ufnwbh

我缺少什么？文档中的示例运行正常。

我的目标是使Modal仅具有可滚动的内容，并且页眉和页脚固定/静态，如文档中的示例所示。

模态可滚动内容不滚动，页脚被隐藏

0 个答案: