Mdb-Stepper in dynamic modal issue


Topic: Mdb-Stepper in dynamic modal issue

bitjuice pro asked 4 years ago

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


Arkadiusz Idzikowski staff answered 4 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 4 years ago

Thanks Arkadiusz


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
  • User: 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