Topic: Progressbar doesn't resize in height
Hi,
I would like to use stacked progress bars, everything works except if I try to set the height of the progress.No matter what the value is of style="height:..." in pixel, the bar is rendered with default height.This is how I set the progress bars (copied directly from the example in the tutorial section):
<div class="progress" style="height: 50px;">
<div
class="progress-bar"
role="progressbar"
style="width: 15%;"
aria-valuenow="15"
aria-valuemin="0"
aria-valuemax="100"
>15</div>
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 30%;"
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
>30</div>
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 20%;"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
>20</div>
</div>
I'm using it in an ASP.NET application.Why the height is ignored?Thank you, best regards.
Roberto
Hi,
Your code is fine and works correctly in the snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/3118446
You should check whether your asp.net application properly sets inline styles in your template. You can also try to add the height with !important flag, or check in the Developer Tools if there is nothing else that overrides this style.
Keep coding, Marcin
Hi Marcin,
thanks for the reply. I didn't find where but the "height" is overridden with the default value "6px". I found a workaround by setting the height here:
<div class="progress" style="height: 50px;">
and here for each bar:
style="width: 15%; height: 50px;"
this way works. Thank you, regards.
Roberto
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.7.4
- Device: PC
- Browser: Firefox/Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No