Topic: MDB 8 - .progress-bar style is missing

itay pro asked 5 years ago


Q: .progress-bar style is missing

A: Show me the proof - code or screenshot. This component was tested before releasing MDB 8 and there were no problems.

--

Should be like: https://imgur.com/a/G9vY8Nf But is like: https://imgur.com/a/GhKXAlH

This is what I had to add:

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  border: 0;
  font-weight: 400;
}

.progress .progress-bar {
  box-shadow: none;
  height: 4px;
  border-radius: 0;
  background-color: #0d47a1;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width .6s;
}

.progress {
  height: 4px !important;
}

Arkadiusz Idzikowski staff answered 5 years ago


Thanks, we will fix that.


itay pro answered 5 years ago


Converted to mdb-progress and dumped my previous styles and it works !

PS. The API section here https://mdbootstrap.com/docs/angular/components/progress-bar is not about progress. It was copied from ProgressSpinnerComponent


Damian Gemza staff answered 5 years ago


Dear @mdb2

As I said, please refactor your div.progress elements to mdb-progress component, and everything will be okay.

Here you can find docs for Progressbars.

Best Regards,

Damian


itay pro answered 5 years ago


<a (click)="click()">
  <div class="card card-cascade cascading-admin-card">
    <div class="admin-up">
      <i class="{{icon}} blue darken-3"></i>
      <div class="data">
        <p>{{caption}}</p>
        <h3 style="direction:ltr">{{ amount }}</h3>
      </div>
    </div>

    <div *ngIf="prev" class="card-body">
      <div class="progress">
        <div class="progress-bar bg-{{style}}" role="progressbar" [style.width]="percentage+'%'" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <p class="card-text">{{percentage}}% {{relative}} prev: <span>{{ prev }}</span></p>
    </div>
  </div>
</a>

scss

.cascading-admin-card {
  text-transform: uppercase;
  margin-top: 20px;

  .admin-up {
    margin-left: 4%;
    margin-right: 4%;
    margin-top: -20px;

    .fa,
    .fab,
    .far {
      float: left;
      padding: 1.2rem;
      font-size: 2rem;
      color: white;
      margin-left: 1rem;
    }

    .data {
      margin-top: 2rem;

      p {
        color: $Gray;
        font-size: 16px;
      }
    }
  }
}

Damian Gemza staff answered 5 years ago


Dear @mdb2

I would like to see the code from this example. Could you please provide me with it? If there's no mdb-progress component, but only div.progress that's the correct behavior.

Please check this component, and if there's no mdb-progress component, please refactor your code.

Best Regards,

Damian


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes