Having trouble creating a full-screen modal with NgbModal by passing content as a component?

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 {
  }
}

Answer №1

Discover the solution by ditching the previous code and opting for a more traditional approach. I utilized CSS and set the components to absolute positioning. As long as the heights of my header and footer remain constant (which I have control over), this method works perfectly.

A shoutout to John Paul Hennessy and his codepen, which provided the inspiration I needed. Check it out here: 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;
}

Answer №2

If you want to display a modal in full screen, you can use the following code snippet. It works perfectly.

The fullscreen property is crucial for showcasing the modal in full screen mode.

You have the option to assign different values to the fullscreen property: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | boolean

For example, setting the value to md will ensure that the modal appears in full screen on a tablet.

https://i.sstatic.net/IMjtF.png

In your code, you can implement it like this:

const journalPopup = this.modalService.open(
JournalPopupComponent,
{fullscreen: true, backdrop: false});

journalPopup.componentInstance.journal = this.journal;

Result:

https://i.sstatic.net/cMN9G.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop non-logged-in users from accessing page content rendering

Lazy loading is being used in my application to render pages. { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard] } The problem arises when the user types www.mydomain.com/dashbo ...

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

"Enscroll – revolutionizing the way we scroll in

I recently incorporated the "enscroll" javascript scroll bar into my webpage. You can find more information about it at <div id="enscroll_name"> <ul> <li id="p1">product1</li> <li id="p2">product2</li> ...

The inner workings of Angular 2: uncovering what occurs once we navigate to http://localhost:4200 on our browser

Could anyone provide a detailed explanation of the startup process for an Angular2 project? For example, after creating a sample project using Angular CLI: Run 'ng new my-test-app' Navigate to 'cd my-test-app' Start the server with & ...

Utilizing Angular2 with Firebase for efficient denormalized data queries

I am currently working on crafting a query for a denormalized database. Drawing inspiration from the example showcased in Firebase's blog post, my objective is to: Retrieve the array of forms associated with the current user and return references to ...

My code is currently experiencing an issue - I'm trying to figure out how to center a

Can anyone help me troubleshoot the code in my attempt to make an image responsive and center it? I've been struggling with this issue and can't figure out what I'm doing wrong. Here's an example of how it currently looks on my screen: ...

Searching for a foolproof oauth framework that includes efficient refresh tokens

Currently, I am implementing oauth with refresh tokens for my Angular application and have a specific set of requirements: Automatically refresh the token when 5% of its time is remaining Handle situations where there is a loss of internet connection (re ...

Errors related to Angular are now being displayed in VS Code following an update, although the build process itself

After updating Angular, I've noticed that VS Code is showing errors in my HTML files even though there are no actual errors present. Interestingly, ng build and ng serve are both working without any issues. Below are some screenshots for reference. Ca ...

How can I remove the unsightly scrollbar caused by overflow: auto?

I've encountered a problem while working on my website. The inner div #content wasn't expanding to the full size of the page, causing the text to overflow messily over the background image and making it difficult to read. I initially used overflo ...

Transitioning from a fixed position to absolute in CSS3

Sticky Logo Element In my project, I implemented a logo element that is positioned absolutely within the document. As the user scrolls, the logo sticks to the top of the window with a fixed position (you can view an example here: https://jsfiddle.net/swzb ...

Navigating an angular collection like a pro

I have the following example data structure within a Component: const Questions = { "java": [ {text: "Is this a question?", answer: "Yes"}, {text: "Another question", answer: "Yes"} ], "python": [ {text: "A different qu ...

Struggling with Implementing Modals in Bootstrap 3.3.7

I've been encountering an issue with modal functionality. In order to troubleshoot my own modals, I decided to replicate the modal example code from Bootstrap's website into a new HTML file. Despite linking to the CDN, the modal does not functio ...

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from https://i.sstatic.net/dtPHU.png to this: https://i.sstatic.net/ct7Zv.png I am unable to modify the style and also need to add an intermediate step I have incl ...

Troubleshooting Standalone Component Routing Issues in Angular 16

For my Angular 16 project code, visit this link To create the Angular 16 project with routing enabled, I used the following command: ng new myapp --standalone Then, I added other components using: ng g c components/home The boilerplate files are differe ...

Struggling to successfully run 'npm audit fix' on the SimpleAngularApp project from the Angular 10 course material on Udemy

My Current Development Setup IDE: IntelliJ IDEA version 2022.3.1, build #IU-223.8214.52, created on December 20, 2022 Java Version: openjdk version "11.0.13" released on October 19, 2021 NodeJS Version: 18.16.0 Angular CLI: 16.0.2 Package Manager: npm 9.5 ...

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

I've encountered an issue with the typography component I'm using for my headings. When I publish the website, the headings do not render properly and the styles are not applied correctly. Strangely, everything looks fine during npm run dev, but ...

Learn the best practices for sharing .env values from the main project component to various reusable npm installed components

In recent projects I've worked on using React and Vue.js, I have utilized .env variables to store API URLs for micro services and other configuration settings that are used throughout the root project. However, when it comes to child components insta ...

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually. For instance, take the navigation drop-down button styling: <span ...

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...