Topic: Progressbar doesn't resize in height

rob.dataccess premium asked 1 year 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 1 year 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 commented 1 year ago

I'm glad you found the solution :)

Keep coding, Marcin


Marcin Luczak staff answered 1 year 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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: 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