Tobias.Weber priority asked 1 year ago

Expected behavior Adjust Stepper Height after change of Stepper Content Size

Actual behavior Stepper Content is not showing completely after expanding some content in it

See my regarding post

ucyberg priority commented 1 year ago

I think it is the principal problem that mdbootstrap has, that the components do not interact when the content changes dynamically. I have had to correct some things in the source code of the components to use it. But there is an option, say the bungling option, but it works, create a function to update the mdbootstrap components and call it every time the content changes dynamically.

function UpdateMDBUI() {

document.querySelectorAll('.select').forEach(function(selectNode) {
    if (!selectNode.classList.contains('select-initialized')) {
        new mdb.Select(selectNode);

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).update();

document.querySelectorAll('.stepper').forEach((stepper) => {
    new mdb.Stepper(stepper);


alex_wearelanded priority answered 5 months ago

7 months and this hasnt been implemented, what kind of responsive material design does not auto size with content ??

Bartosz Cylwik staff commented 5 months ago

We have added a new dynamic prop that by default is set to false. When set to true the stepper height is being recalculated on step content changes.

Checkout my snippet here:

Link to our documentation (if needed):

triklimops-org priority answered 1 year ago

I had written something similar to expand the area of the stepper after dynamic content was added, however your solution is better. Thanks for sharing!

Bartosz Cylwik staff answered 1 year ago

Thank You for posting! We will discuss it in our team. Best Regards!

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 Vue
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes