Customize NgbModal size

user_3719167 0
Viewed 24452

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.

angular6 ng-bootstrap angular
2 Answers

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

You can also manipulate this size just by changing the value of the "size" variable! this.modalContent, {backdrop: 'static',size: 'sm', keyboard: false, centered: true}

user_89337550
Related