Topic: Dynamic Modal custom dimensions
QPdev free asked 3 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 3 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
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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