Topic: Stepper Content Component does not have dynamic height

NoahConn pro asked 1 year ago

Expected behavior

When I add additional content to a ''MDBStepperContent" component, the height will adjust automatically to display all of the content.

Actual behavior

When I add additional content to a ''MDBStepperContent" component, the height is static and does not display new content.

Resources (screenshots, code snippets etc.)

Mikołaj Smoleński staff commented 1 year ago

Did you try to add a key prop to the Stepper and then change it right after the dynamic data is added? This should force the component to reload.

Keep coding,  Mikołaj from MDB

NoahConn pro commented 1 year ago

This does re-render the component but the animations are pretty abrasive. Additionally, this does not solve the problem of height issues when form inputs provide validation feedback and push form fields out of view.

Mikołaj Smoleński staff commented 1 year ago

Can you share your code? It's hard to recreate this issue without the real example.

Keep coding,  Mikołaj from MDB

NoahConn pro commented 1 year ago

Here is the src folder for the problem I described. Let me know if you need anything else!

Mikołaj Smoleński staff commented 1 year ago

Thanks for the code. We'll make a review and check possible fixes.

Keep coding,  Mikołaj from MDB

jseird priority answered 3 months ago

Same problem here - also with the newest MDB v5.0. Any improvements planed already?Current workaround I used to use is like the code below and applying either event listener on all sorts of events that occur within the stepper as well as right after injection of dynamic content. The code get the height of the client and compares against the scrollheight. If no different heights are found in the heightBuffer the interval-loop is closed. Same if the counter gets too high. hope that helps for the moment. Cheers.

var stepperDom = document.getElementById('the-stepper');

var stepper = new mdb.Stepper(stepperDom); var resizeStepper = function(paddingBottom) { if(typeof(paddingBottom) == 'undefined') paddingBottom = 0; let height = stepperDom.querySelectorAll('.stepper-step.stepper-active .stepper-content').item(0).clientHeight, heightBuffer = []; heightBuffer.push(height);

let counter = 1; // Prevent infinite loop
let resizer = setInterval(function()
    height = stepperDom.querySelectorAll('.stepper-step.stepper-active .stepper-content').item(0).scrollHeight;
    heightBuffer = heightBuffer.slice(-5); = height + 'px';

    if(heightBuffer.reduce(function(a, b){ return a + b;}, 0) / heightBuffer.length == height || counter > 10) 
    { = parseInt(height + paddingBottom) + 'px';
}, 80);

}; stepperDom.addEventListener('click', function(){resizeStepper(84)});

Mikołaj Smoleński staff commented 3 months ago

Which version of MDB do You use? Standard or Vue? It looks like you opened the ticket in wrong category.

Keep coding!

jseird priority commented 3 months ago

Standard with same issue using above workaround.

Mikołaj Smoleński staff commented 2 months ago

Please open a ticket in Standard category.

Keep coding!

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

  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.4.0
  • Device: Macbook Pro 2017
  • Browser: Chrome
  • OS: macOS Big Sur
  • Provided sample code: No
  • Provided link: No