Stepper component resize and position calulation only workin


Topic: Stepper component resize and position calulation only working on first page

AngSol asked 4 years ago

Expected behavior Resizing should work on each stepper page

Actual behavior Resizing only works on first step - all other steps do not work (content disappears when resizing). Also autocomplete container position is calculated wrong with a width of 0 and wrong translationXY values

Resources (screenshots, code snippets etc.)


poomkawin answered 4 years ago

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.


Grzegorz Bujański staff answered 4 years ago

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


AngSol commented 4 years ago

Can you please provide a timeline when this major bug for the stepper control will be fixes. It is still there in Version 3.3.0. For us this bug is a show stopper since there a more side effects (like overlapping labels, autocomplete is invisible, etc) in the stepper control.

best regards


Grzegorz Bujański staff commented 4 years ago

Unfortunately, at the moment I am not able to give an approximate date. We will fix it as soon as possible.


poomkawin answered 4 years ago

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.


AngSol answered 4 years ago

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.


Grzegorz Bujański staff commented 4 years ago

Thanks for reporting. We'll check it


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No