Stepper not initialised


Topic: Stepper not initialised

Magnus pro premium priority asked 2 years ago

Expected behavior Opening modal should show the stepper example. It's expected to be initiated.

Actual behavior Opening modal should show the stepper example, it's however not initiated.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/magnus/5020694


mlazaru staff answered 2 years ago

Initializing via classes/data-attributes is a perfect solution for cases when component is supposed to be created when page loads - this is the only time the autoinit checks if any component should be initialized. In your case, it's being added dynamically after load event, so it will not work.

You should add the following line:

new mdb.Stepper(document.querySelector('.stepper'));

or even better:

mdb.Stepper.getOrCreateInstance(document.querySelector('.stepper'))

Make sure that code will execute after stepper's template is injected into the document.


Magnus pro premium priority commented 2 years ago

Thanks mlazaru, I added your code into following MDB snippet however the component disappears.

https://mdbootstrap.com/snippets/standard/magnus/5025159

Please advice what’s wrong.


mlazaru staff commented 2 years ago

It looks like stepper inside modal doesn't work correctly. Now it's it is being initialized in your snippet, but it has height set to 0. There is a workaround for that, you could just set it to something else, eg. inherit, but I've found also other issue with displaying stepper's inputs, so I will better add it as a bug on our todo list.


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: Crome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags