mdb-stepper is not responsive as you see examples


Topic: mdb-stepper is not responsive as you see examples

Wanderson pro asked 2 years ago

Expected behavior

Component just doesn't work as per example

https://mdbootstrap.com/docs/angular/components/stepper/#stepper-with-icons

Actual behavior

That works with responsiveness.

Just put the code in your application and it will not work as per the example. I have the JQuery library I don't have so many problems, but Angular is having problems and incomplete documentation. We need to release a production version but we are not confident with the library.

Resources (screenshots, code snippets etc.)


Konrad Stępień staff answered 2 years ago

Hi @Wanderson,

Thank you for report the bug.

If you want to change vertical property, please change the first line in HTML code for like this:

<mdb-stepper #stepper [linear]="true" [vertical]="vertical" (window:resize)="onResize($event)" (window:load)="onResize($event)">

And then we need to make vertical variable and onResize function.

vertical = false;
onResize(event: any) {
  if (event.target.innerWidth >= 786) {
    this.vertical = false;
  } else {
    this.vertical = true;
  }
}

So, now component has a breakpoint in 786px.

Also, we will change the documentation of this component.

Thanks again, and I hope my solution will be exactly what do you need.

Best, Konrad.


Wanderson pro commented 2 years ago

Thanks, it worked perfectly!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes