Search code examples
angularangular6ng-bootstrap

Customize NgbModal size

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%;
}