Position and size for dynamic modals

Hello,

It is explained in the 'Customize modal' section in our documentation:

Customize dynamic modal

To 'containerClass' option you need to add classes which you would normally add to the div with 'mdbModal' directive. 'Class' option is for classes of the second div.

hi,

const modalOptions = {
  backdrop: true, keyboard: true, focus: true, show: true,
  ignoreBackdropClick: true, animated: true, containerClass: 'modal-lg',
  data: { heading: 'Edit Administrator', admin: this.admins[index] }
};

this.modalRef = this.modalService.show(AdminModalComponent, modalOptions );
this.adminsSub.add(
  this.modalRef.content.action.subscribe( (result: any) => {
    admin.Name = result.firstname + ' ' + result.lastname;
    admin.Email = result.email;
    admin.Level = result.type;
    admin.Active = result.active;
    this.modalRef.hide();
  })
);

changes the position of the modal ( moves to the left ) but does not increase the size. Thanks

Dear Liz,

I have investigated your problem one more time, and I have discovered a bug with your code.

If you want to set the modal size (class added to the div with .modal-dialog class), use the property class in the ModalOptions interface.

And if you want to set the overflow of the dynamic modal, please add the overflow-auto class to the containerClass property.

Here's the correctly implemented modalOptions object:

openModal() {
    const modalOptions = {
      backdrop: true, keyboard: true, focus: true, show: true,
      ignoreBackdropClick: true, animated: true, containerClass: 'overflow-auto',
      class: 'modal-lg',
      data: { heading: 'Edit Administrator', admin: '' }
    };

    this.modalRef = this.modalService.show(ModalComponent, modalOptions)
  }

Best Regards,

Damian