Topic: Dynamic Modal custom dimensions

QPdev free asked 2 years ago


Hi, we are using customized dynamic modals, as described in here: https://mdbootstrap.com/docs/angular/modals/basic/

The Usage looks like this:

this.modalRef = this.modalService.show(PushnotificationModalComponent, {
        class: "modal-lg modal-full-height cascading-modal pt-5",
        containerClass: "modal fade right",
        backdrop: false,
        ignoreBackdropClick: true,
        focus: true,
        animated: true
    })

The modal component html itself looks like this:

<div class="modal-header db-primary-gradient align-items-center">
    <p class="heading">Pushnachricht Senden</p>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()">
         <span aria-hidden="true" class="white-text">×</span>
    </button>
</div>
<div class="modal-body mt-1 scrollbar-primary">
    <h3>Body</h3>
</div>
<div class="modal-footer">
    <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>
    Senden
    </button>
</div>

However, we would like to use different widths than in the predefined classes modal-full-height and modal-lg, respectively. We want to define the widths individually.

How does this work with dynamic modals?


Arkadiusz Idzikowski staff answered 2 years ago


You can use class option to define custom class form modal and then define CSS rules you need in styles.scss:

this.modalRef = this.modalService.show(PushnotificationModalComponent, {
        class: "your-custom-class modal-lg modal-full-height cascading-modal pt-5",
        containerClass: "modal fade right",
        backdrop: false,
        ignoreBackdropClick: true,
        focus: true,
        animated: true
    })

styles.scss

.your-custom-class {
  // override modal styles
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 9.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags