1

Similar questions have been asked before but I can't seem to apply their solution to this specific use case.

I'm trying to increase the width of my modal window, the most common solutions are to encase the content in a <div class="modal-dialog"></div> However, when I try this solution the modal becomes completely unresponsive, the formatting gets strange and the buttons stop working.

I used this ng-bootstrap guide for making the component and my desired end-result is a 90% width modal window in which I can place other components based on situation.

Here is the containing component code:

<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<button class="btn btn-lg btn-outline-primary" (click)="openModal()">Launch demo modal</button>

Here is the containing component.ts:

import { Component, OnInit } from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {ModalInvoicePopupComponent} from '../modal-invoice-popup/modal-invoice-popup.component';

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {

  constructor(private modalService: NgbModal) {}

  openModal() {
    const modalRef = this.modalService.open(ModalInvoicePopupComponent);
  }

  ngOnInit() {
  }

}

Here is the modal-component html:

<div class="modal-header">
  <h4 class="modal-title">myModal title</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>myModal body</p>
  <p>Size differences when a large string is inserted, test of scaling</p>
  <p>Importing an existing app into the modal, what happens then?</p>
  <app-invoices></app-invoices>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

If I try to encase the modal-component inside a modal-dialog div it just breaks, and starts looking like this: enter image description here

And becomes completely unresponsive.

Is there a good way to increase the size of a modal popup when used as a component in Angular?

Marcus Grass
  • 1,043
  • 2
  • 17
  • 38

2 Answers2

0

Change your function like below :

openModal() {
    const modalRef = this.modalService.open(ModalInvoicePopupComponent, {
        width: '78vw'
    });

}

It will give the width of modal 78vw and you can change it according to your mobile devices.

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Maulik
  • 349
  • 4
  • 19
0

You have used NgbModal, in that case for defining the size of modal you can go for NgbModalOptions. There you can define the size of the modal while opening it, say

this.modalService.open(content,{
    size: 'xl'
});

refer https://ng-bootstrap.github.io/#/components/modal/api for detailed information.

yogeswaran
  • 11
  • 2