Topic: Mdb-Stepper in dynamic modal issue
Hi.
I am a problem with dynamic modal: if I add a mdb-stepper in modal-body, when I open the modal, it is shown with a "flash" effect;
It seems that modal is first shown empty, then closed end finally it is reopened with the right body content.
This is the code of my modal component
<div class="modal-content">
<div class="modal-header bkg-neutral">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span>×</span>
</button>
Contattaci
</div>
<div class="modal-body">
<mdb-stepper #eduitemstepper [linear]="true">
<mdb-step name="Date">
</mdb-step>
<mdb-step name="Studio">
</mdb-step>
</mdb-stepper>
</div>
</div>
How can I fix this issue?
Thanks
Marco
Thank you for reporting this issue. We managed to reproduce this bug on our end, but we still need some time to find the cause of the problem.
As a workaround, please try to delay stepper initialization using *ngIf directive, to make sure that the modal is loaded before the stepper. For example:
<mdb-stepper *ngIf="visible">...</mdb-stepper>
visible = false;
ngOnInit() {
setTimeout(() => {
this.visible = true;
}, 0);
}
Answered
- User: Pro
- Premium support: No
- Technology: Angular
- MDB Version: 10.1.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No