Topic: Stepper not initialised
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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