Tobias.Weber priority asked 1 year 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 priority commented 1 year 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);
});

}


alex_wearelanded priority answered 1 month ago


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


Bartosz Cylwik staff commented 1 month 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


triklimops-org priority answered 10 months 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!


Bartosz Cylwik staff answered 1 year ago


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



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