Topic: Change progress bar height with CSS
How can i change the height of the Progress Bar, the CSS from the docs is not working?https://mdbootstrap.com/docs/angular/components/progress-bar/
<mdb-progress value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
.progress-bar, .progress { height: 20px !important; }
Mdb-progress is a pro component, but according to our system, you use MDB Angular Free version. If you have access to MDB Angular Pro components, please send your order id to a.idzikowski@mdbootstrap.com so we can fix that.
You need to add this styles to your global styles.scss file. I just checked that and it works correctly, modify the height value to see the difference.
piechade pro commented 5 years ago
I send you an E-Mail about it.
piechade pro commented 5 years ago
Global styles.scss is added and the progessbar is working. It's about the CSS and that it should make it bigger. For me it's has no effect.
Arkadiusz Idzikowski staff commented 5 years ago
Thank you for the confirmation, we will update the status of your forum account.
We couldn't reproduce the problem with height customization on our end. In case of any further problems please send a simple demo app to a.idzikowski@mdbootstrap.com, so we can check if the app is configured correctly.
Double check it please, if i use mdb-progress i get the following HTML. I'am using the Angular version not JQuery.
<mdb-progress _ngcontent-xqu-c199="" value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" ng-reflect-value="25" ng-reflect-max="100" ng-reflect-type="success"><div mdbprogress="" ng-reflect-animate="true" ng-reflect-max="100" max="100" class="progress"><mdb-bar ng-reflect-type="success" ng-reflect-value="25"><div role="progressbar" aria-valuemin="0" class="progress-bar progress-bar-success" style="min-width: 0px; width: 25%;" ng-reflect-ng-class="progress-bar-success" ng-reflect-ng-style="[object Object]" aria-valuenow="25" aria-valuetext="25%"></div></mdb-bar></div></mdb-progress>
This CSS was working for me:
::ng-deep .progress { height: 50px !important; }
::ng-deep .progress-bar { height: 50px !important; }
Arkadiusz Idzikowski staff commented 5 years ago
We double checked that. The HTML and CSS code from your first post work correctly if you add the CSS code to the global styles.scss file. In case of any further problems we will need a simple demo app on which we will be able to reproduce that. You can send it to me via email.
piechade pro commented 5 years ago
Ok, it's for the global. If I want more height only in a component than I need to rewrite it.
Arkadiusz Idzikowski staff commented 5 years ago
You can add a custom class to the specific component you want to customize and update the styles to target only components with this custom class. For example:
<mdb-progress class="custom-progress" value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></mdb-progress>
.custom-progress .progress-bar,
.custom-progress .progress {
height: 60px !important;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.0.0
- Device: Notebook
- Browser: Google Chrome 80
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes