Stepper Resize


Topic: Stepper Resize

Tobias.Weber pro premium priority asked 2 years ago

Expected behavior Adjust Stepper Height after change of Stepper Content Size

Actual behavior Stepper Content is not showing completely after expanding some content in it

See my regarding post https://mdbootstrap.com/support/vue/stepper-resize-2/


ucyberg pro premium priority commented 2 years ago

I think it is the principal problem that mdbootstrap has, that the components do not interact when the content changes dynamically. I have had to correct some things in the source code of the components to use it. But there is an option, say the bungling option, but it works, create a function to update the mdbootstrap components and call it every time the content changes dynamically.

function UpdateMDBUI() {

document.querySelectorAll('.select').forEach(function(selectNode) {
    if (!selectNode.classList.contains('select-initialized')) {
        new mdb.Select(selectNode);
    }
})

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).update();
});

document.querySelectorAll('.stepper').forEach((stepper) => {
    new mdb.Stepper(stepper);
});

}


Bartosz Cylwik staff answered 2 years ago

Thank You for posting! We will discuss it in our team. Best Regards!


pro premium priority answered 2 years ago

I had written something similar to expand the area of the stepper after dynamic content was added, however your solution is better. Thanks for sharing!


alex_wearelanded pro premium priority answered 10 months ago

7 months and this hasnt been implemented, what kind of responsive material design does not auto size with content ??


Bartosz Cylwik staff commented 10 months ago

We have added a new dynamic prop that by default is set to false. When set to true the stepper height is being recalculated on step content changes.

Checkout my snippet here: https://mdbootstrap.com/snippets/vue/b-cylwik/5916643#html-tab-view

Link to our documentation (if needed): https://mdbootstrap.com/docs/vue/components/stepper/#subsection-stepper-step


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: -
  • Device:
  • Browser:
  • OS:
  • Provided sample code: No
  • Provided link: Yes
Tags