Angular 6 modal, increasing the width of the modal when used as a separate component

问题

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:

And becomes completely unresponsive.

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

回答1:

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.

来源：https://stackoverflow.com/questions/51455734/angular-6-modal-increasing-the-width-of-the-modal-when-used-as-a-separate-compo

标签

javascript

css

angular

modal-dialog

bootstrap-modal