I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this:
However, when I want to customize further and use my own component as the content inside the modal, the layout breaks. The nested component within the modal-content disrupts the flow. I'm following the guidelines mentioned here:
Even in the example provided above, the component is nested within the modal-content div.
When attempting to go fullscreen using the method from the first link, the modal, modal-dialog, and modal-content all go full screen, but the nested component remains sized according to its content despite efforts to style it. What am I missing here? Appreciate any help! Have a great Friday.
::EDIT TO OVERRIDE LIMITATIONS IN COMMENTS::
CSS
.gr-modal-full .modal-dialog {
min-width: 100%;
margin: 0;
}
.gr-modal-full .modal-content {
min-height: 100vh;
}
.TS CALLING THE COMPONENT
const journalPopup = this.modalService.open(
JournalPopupComponent,
{windowClass: 'gr-modal-full', backdrop: false});
journalPopup.componentInstance.journal = this.journal;
COMPONENT
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 {
}
}