[Fixed] Customize NgbModal size

Issue

I’m using Angular 6 and NgbModal like

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg'});
}

But this opens modal with width 50% only with 25% space empty on both sides.

I want to redesign modal width to up to 90% of the window width.

But there are only sm and lg sizes allowed with NgbModal.

How can I increase the width of the modal or probably use a custom class to increase modal width?

I tried setting values like xl to size but it does not work.
I also tried customizing the CSS of the modal class but this did not work either.

Solution

You can set the ‘windowClass’ property referencing some class, so your code would be like:

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg', windowClass: 'modal-xl'});
}

and then, on some .css you’re using, add your own class with the custom size to override like:

.modal-xl .modal-lg {
  max-width: 90%;
}

Leave a Reply

(*) Required, Your email will not be published