CODEWITHSUNDEEP
angularangular6ng-bootstrap
Anuj TBE
Anuj TBE

Reputation: 9790

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.

Upvotes: 9

Views: 33712

Answers (3)

Sarang
Sarang

Reputation: 2713

None of this answers are accurate. There's a far easier solution. Use the size option to pass some custom name, let's say mysize:

this.modalService.open(content, { size: 'mysize' });

Now, set the CSS class modal-mysize to whatever size you want. This class is applied to the actual modal window, so you can use it to customize other stuff as well. The following will set the width to 200px:

.modal-mysize {
    max-width: 200px;
}

Hope this helps!

Upvotes: 5

Cherma Ramalho
Cherma Ramalho

Reputation: 395

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}

Upvotes: 3

Andre Knob
Andre Knob

Reputation: 831

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

Upvotes: 21

Related Questions