Topic: Stepper not initialised

Magnus priority asked 1 year 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.)

Mateusz Lazaru staff answered 1 year 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:


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

Magnus priority commented 1 year ago

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

Please advice what’s wrong.

Mateusz Lazaru staff commented 1 year 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.


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



Specification of the issue

  • ForumUser: Priority
  • 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