Topic: Progressbar doesn't resize in height
                  
                  rob.dataccess
                  premium
                  asked 4 years ago
                
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
                      
                      rob.dataccess
                      premium
                        answered 4 years ago
                    
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
                      
                      Marcin Luczak
                      staff
                        answered 4 years ago
                    
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Premium
 - Premium support: Yes
 - Technology: MDB jQuery
 - MDB Version: MDB4 4.7.4
 - Device: PC
 - Browser: Firefox/Chrome
 - OS: Windows 10
 - Provided sample code: No
 - Provided link: No