Topic: mdb-progress not working as expected

Thiessen free asked 4 years ago

For some reason, the progress bar doesn't fill (the bar width doesn't change) when the value is set to it.

<mdb-progress value="0" min="0" max="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

<mdb-progress value="25" min="0" max="100" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

<mdb-progress value="50" min="0" max="100" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

<mdb-progress value="75" min="0" max="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

<mdb-progress value="100" min="0" max="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></mdb-progress>

I tried copying the code above into my project but each of the progress bar just shows an empty one. The JQuery version works fine though.

Konrad Stępień staff commented 4 years ago

Hi @Thiessen,

The code is works correctly for me.


Do other components also have problems in operation? Are there any notifications in the console?

Can you make sure you followed the tutorial well?

Best, Konrad.

Thiessen free commented 4 years ago

I have followed it correctly. I don't seem to have any problems with other components. Just the progress bar in particular has issues. I will try to test by removing all custom styling to see if that is causing the problem.

Konrad Stępień staff commented 4 years ago

Any results? Did you try to make a new project and only use the progress component?

Thiessen free commented 4 years ago

Issue was with the mdb stylesheet not included right (It was a human error on my part). Everything works fine now.

Konrad Stępień staff commented 4 years ago

I am glad that the problem has been solved.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.0
  • Device: All
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No