Прокручиваемый модальный контент не прокручивается, а нижний колонтитул скрыт - PullRequest
Новая
       44

Прокручиваемый модальный контент не прокручивается, а нижний колонтитул скрыт

0 голосов
/ 25 июня 2019

Я делаю веб-приложение в Angular 8.0.4 и использую @ ng-bootstrap / ng-bootstrap 5.0.0-rc.0 .

Я следую документации , чтобы создать Модал с прокручиваемым содержимым .Прямо сейчас содержимое не прокручивается, и нижний колонтитул скрыт.

Я открываю модальное окно так: 

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

Что мне не хватает?Пример в документации работает нормально.

Моя цель - иметь модал только с прокручиваемым содержимым, с фиксированным / статическим верхним и нижним колонтитулами, как в примере из документации.

...