Topic: Stepper Content Component does not have dynamic height

NoahConn pro asked 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago

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

https://github.com/NoahConn/mdbstepper-support


Mikołaj Smoleński staff commented 2 years ago

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

Keep coding,  Mikołaj from MDB


jseird priority answered 1 year ago


Same problem here - also with the newest MDB v5.0. Any improvements planed already?Current workaround I used to use is s.th. 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.push(height);
    heightBuffer = heightBuffer.slice(-5);
    stepperDom.style.height = height + 'px';

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

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


Mikołaj Smoleński staff commented 1 year 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 1 year ago

Standard with same issue using above workaround.


Mikołaj Smoleński staff commented 1 year ago

Please open a ticket in Standard category.

Keep coding!



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

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