Topic: MDB 8 - .progress-bar style is missing
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;
}
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
<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;
}
}
}
}
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
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
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: 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