CODEWITHSUNDEEP
javascripthtmlcss
acetrap
acetrap

Reputation: 45

Bootstrap progressbar text

Problem: Bootstrap progress bar text will only show text if there is any progress made.

enter image description here

What I tried: Putting it in different places, just after the div will mess up the CSS and in the main progress div too.

Optimal solution: This is how I want it to look:

enter image description here

So the text will show no matter how much progress there is. Should be an easy solution but I just can't figure it out.

This is where the progress-bar text is currently at.

   echo'
          <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="90"
                   aria-valuemin="0" aria-valuemax="100" style="width:'.$width.'%">'
  ?>
                 <div class="innerProgress"> € <?php echo $singleRow["opgehaald"]; echo "&nbsp";>
opgehaald </div>
                              </div>
                            </div>

Upvotes: 0

Views: 758

Answers (1)

sandeep joshi
sandeep joshi

Reputation: 2151

bootstrap hides the overflow thus the text looks truncated. setting width and overflow property on the .innerProgress class should help you get the desired result. you can adjust the background color and text color to make it the way you have shown in OP.

.innerProgress {
  position: absolute;
  width: 100%;
  color: black;
  text-align: left;
  overflow: visible;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:20%">
    <div class="innerProgress"> € opgehaald this is very long text and must be shown and its goes very long</div>
  </div>
</div>
<br/>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:2%">
    <div class="innerProgress"> this one has only 2% progress</div>
  </div>
</div>

Upvotes: 2

Related Questions