Не удается получить модальный полноэкранный режим с использованием NgbModal при передаче содержимого в качестве компонента - PullRequest
Новая
       18

Не удается получить модальный полноэкранный режим с использованием NgbModal при передаче содержимого в качестве компонента

0 голосов
/ 18 января 2019

Я использую виджеты Bootstrap и пытаюсь создать полноэкранный модальный режим (верхний колонтитул вверху, нижний колонтитул внизу и прокрутка тела в середине). Я легко могу сделать это с помощью простого HTML, как описано здесь:

https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal

Однако, как только я начинаю усложняться и хочу называть свой собственный компонент содержимым, он перестает работать. Компонент вложен на один уровень ниже модального контента, и я считаю, что именно это нарушает поток. Я пытаюсь следовать инструкциям, изложенным здесь:

https://ng -bootstrap.github.io / # / компоненты / модальные / примеры # компонент

Даже в этом примере выше вы можете проверить его и увидеть, что компонент вложен в div модального содержимого.

Эффект (при попытке перейти в полноэкранный режим с использованием метода, указанного в первой ссылке выше), заключается в том, что все модальные, модальные диалоги и модальные контенты ДОЛЖНЫ работать в полноэкранном режиме. Тем не менее, вложенный компонент в пределах модальных размеров компонента к содержимому, несмотря на мои попытки стилизовать его поведение.

Какую очевидную вещь я здесь упускаю? Заранее спасибо и счастливой пятницы.

:: РЕДАКТИРОВАТЬ, ЧТОБЫ ИЗМЕНИТЬ ОГРАНИЧЕНИЯ В КОММЕНТАРИИ ::

CSS 

.gr-modal-full .modal-dialog {
  min-width: 100%;
  margin: 0;
}
.gr-modal-full .modal-content {
  min-height: 100vh;
}

.TS ВЫЗЫВАЯ КОМПОНЕНТ 

  const journalPopup = this.modalService.open(
    JournalPopupComponent,
    {windowClass: 'gr-modal-full', backdrop: false});
  journalPopup.componentInstance.journal = this.journal;

КОМПОНЕНТ 

import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {HttpClient} from '@angular/common/http';

@Component( {
  selector: `
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
`,
  templateUrl: './journal.popup.component.html',
  styleUrls: ['./journal.popup.component.scss']
})

export class JournalPopupComponent implements OnInit {
  @Input() journal: any;
  constructor(public modal: NgbActiveModal) {}
  ngOnInit(): void {
  }
}

1 Ответ

0 голосов
/ 19 января 2019

Получите ответ, выбросив приведенный выше код и перейдя к старой школе. Я просто использовал CSS и сделал компоненты абсолютными. Пока высоту моего верхнего и нижнего колонтитула не нужно менять (что я могу контролировать), это делает свое дело.

Реквизиты Джона Пола Хеннесси и его помощника за то, что они дали мне пинок, который мне нужен по этой ссылке: https://codepen.io/yewnork/pen/Kpaqeq

.gr-modal-full .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.gr-modal-full .modal-dialog {
  position: fixed;
  margin: 0;
  min-width: 100%;
  height: 100%;
  padding: 0;
}

.gr-modal-full .modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

.gr-modal-full .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  padding: 10px;
  border-radius: 0;
  //background: #6598d9;
}

.gr-modal-full .modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.gr-modal-full .modal-body {
  position: absolute;
  top: 81px;
  bottom: 61px;
  width: 100%;
  overflow: auto;
}

.gr-modal-full .modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  border-radius: 0;
  //background: #f1f3f5;
}
...