Topic: Stepper Content Component does not have dynamic height
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.)
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 2 years ago
Which version of MDB do You use? Standard or Vue? It looks like you opened the ticket in wrong category.
Keep coding!
jseird pro premium priority commented 2 years ago
Standard with same issue using above workaround.
Mikołaj Smoleński staff commented 2 years ago
Please open a ticket in Standard category.
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Mikołaj Smoleński staff commented 3 years ago
Did you try to add a
keyprop 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 3 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 3 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 3 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 3 years ago
Thanks for the code. We'll make a review and check possible fixes.
Keep coding, Mikołaj from MDB