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