Topic: Mdb-Stepper in dynamic modal issue

bitjuice pro asked 3 years ago


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()">
  <div class="modal-body">
    <mdb-stepper #eduitemstepper [linear]="true">
      <mdb-step name="Date">
      <mdb-step name="Studio">

How can I fix this issue?



Arkadiusz Idzikowski staff answered 3 years ago

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);

bitjuice pro commented 3 years ago

Thanks Arkadiusz

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No