Stepper component resize and position calulation only workin

I also have the exact same issue. Stepper content collapses when resizing the window. Only the first step seems to work fine.

This issue is very frustrating on iPad, because when I start scrolling, Safari decided that it wants to collapse the toolbar and hide all the tabs. Thus, making the size of the window changes and the stepper collapses.

Thanks for reporting these bugs. We will fix them as soon as possible.

After hours of digging through MDB JS, I found out that there is some kind of event listener attached to the Stepper which gets call every time when the window is resized.

The function is called "_bindResize()."

So deleting this function in mdb.min.js (you can search for "this._bindResize()") stops the stepper from collapsing when the window is resized. (Make sure to delete the comma that comes before the function too!)

However, the side effect of deleting this function is that the Stepper won't toggle between modes (Horizontal, Vertical, or Mobile).

Here's the temporary fix for the Stepper to change between different modes

Initial Mode On Page Load:

let currentWindowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let currentStepperType;
if (currentWindowWidth >= 768) {
    currentStepperType = 'stepper-horizontal';
} else if (currentWindowWidth >= 400) {
    currentStepperType = 'stepper-vertical';
} else {
    currentStepperType = 'stepper-mobile';
}

Event Listener for Window Resize

window.addEventListener('resize', function () {
    currentWindowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (currentWindowWidth >= 768 && currentStepperType !== 'stepper-horizontal') {
        console.log('Stepper type to Desktop');
        myStepper.classList.remove(currentStepperType);
        myStepper.classList.add('stepper-horizontal');
        currentStepperType = 'stepper-horizontal';
        // Your additional code to re-calculate the stepper height
    } else if (currentWindowWidth < 768 && currentWindowWidth >= 400 && currentStepperType !== 'stepper-vertical') {
        console.log('Stepper type to Vertical');
        myStepper.classList.remove(currentStepperType);
        myStepper.classList.add('stepper-vertical');
        currentStepperType = 'stepper-vertical';
        // Your additional code to re-calculate the stepper height
    } else if (currentWindowWidth < 400 && currentStepperType !== 'stepper-mobile') {
        console.log('Stepper type to Mobile');
        myStepper.classList.remove(currentStepperType);
        myStepper.classList.add('stepper-mobile');
        currentStepperType = 'stepper-mobile';
        // Your additional code to re-calculate the stepper height
    }
});

Don't forget to add your code to re-calculate the stepper height. Otherwise, the contents in the stepper will be overflown.

Please be caution that there may be more side effect that I haven't find out yet.

Hope this helps you.

Encountered another strange behavior with stepper control.

When adding an input character counter the form helper gets duplicated on the second stepper page. (e.g. 0/20) On the third page this text appears 3-times and so on.