MDB Progress Bar does not display text above bar

Topic: MDB Progress Bar does not display text above bar

twj priority asked 4 years ago

Hello,

I have some troubles with displaying text in my MDB progress bar. As shown in example text should be displayed above it, but I have text inside my bar.

Screenshot from documentation: enter image description here

Screenshot from my webpage: enter image description here

I just copy-paste code from documentation and connected JS file. Maybe I'm doing something wrong?

Thanks in advance!

P.S: MDB version is 4.8.7, I didn't find it in selector above when created this topic

Add comment

MDBootstrap staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, twj,

I am sorry that this happened: Ad this css style to your project:

.progress-bar.active {
  background-color: #007bff;
}

.progress-bar.success {
  background-color: green;
}

.progress-bar.fail {
  background-color: red;
}

.md-progress {
  position: relative;
  overflow: visible;
}

.md-progress-bar-text {
  font-weight: 500;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  color: #343a40;
}

This addon will be removed from the package in next release because of its low quality. You can find a snippet example of this component here: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/878002

twj priority commented 4 years ago

Thanks a lot! Now it works fine

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB jQuery
MDB Version: 4.8.5
Device: Any
Browser: Any
OS: Win 10
Provided sample code: No
Provided link: No

twj

70Support score
5Questions 5Answers 1Snippets