Can't get a fullscreen modal using NgbModal when passing content as a component

Question

I am using Bootstrap widgets and am attempting to create a full screen modal (header sticks on top, footer on bottom, and body scrolls in the middle). I can easily do this with some simple html as outlined here:

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

However, once I start getting more complex and want to call my own component as the content then it no longer works. The component nests one level down from the modal-content and I believe this is what is breaking the flow. I am attempting to follow the instructions outlined here:

https://ng-bootstrap.github.io/#/components/modal/examples#component

Even in this above example you can inspect it and see the component is nested within the modal-content div.

The effect (when trying to go full screen using the method in the first link above) is that the modal, modal-dialog, and modal-contend all DO go full screen. However, the nested component within the modal component sizes to content despite my attempts to style it to behave.

What obvious thing am I missing here? Thanks in advance and happy 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 {
  }
}

What have you tried? Please post a Minimal, Complete, and Verifiable example — hawkstrider
Right... there's a lot going on. Here's my best to simplify it. Styling is relatively straight forward: .gr-modal-full .modal-dialog { min-width: 100%; margin: 0; } .gr-modal-full .modal-content { min-height: 100vh; } — AGuido
Here is the .ts where I'm calling the component: const journalPopup = this.modalService.open( JournalPopupComponent, {windowClass: 'gr-modal-full', backdrop: false}); journalPopup.componentInstance.journal = this.journal; — AGuido
Here is the comp: 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 { } } — AGuido
Perhaps there is an easier route. Does anyone have a code sample of how to do a full screen modal when calling a component for the content. Header should always stay on top, footer on bottom, and the body scrolls when needed. — AGuido

AGuido AGuido · Accepted Answer · 2019-01-18T21:45:48

Have the answer by throwing away the above code and going more old-school. I just used CSS and made the components absolute. As long as the heights of my header and footer don't need to change (which I can control) this does the trick.

Props to John Paul Hennessy and his codepen for giving me the kick I needed at this link: 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;
}

Can't get a fullscreen modal using NgbModal when passing content as a component

1 Answers