bootstrap progress bar title text part is invisible

Sven Kavon 0
Viewed 20

I have code below to show a progress bar. If the progress bar is low (<30%), the the text is not visible (see screenshot). The text is set by JavaScript.

screenshot of my progressbar with unvisible text

const data = {
  BatterySOC: 10
}

const dbu = 20;

document.getElementById('batLaderichtung').innerHTML = Math.floor(data.BatterySOC) + "%" + "&nbsp;(" + dbu + " W)";
document.getElementById("batLaderichtung").style["width"] = Math.floor(data.BatterySOC) + "%";
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="col-3 offset-md-1 col-md-2 mydivLabel text-right ">
  <a href="http://192.168.1.79/">
    <img src="https://via.placeholder.com/50" height="23px" width="70px"></a>
</div>

<div class="col-6 offset-2 offset-md-0 col-md-3 mydiv">
  <div class="container-fluid">
    <div class="progress" style="height: 24px;">
      <div id="batLaderichtung" style="width: 0%;" class="progress-bar progress-bar-animated progress-bar-striped">
        0%
      </div>
    </div>
  </div>
</div>

progress-bar twitter-bootstrap
1 Answers

Bootstrap hides overflow so you can apply this style to the progressBar or you can make a new CSS class and apply this style rather than the inline style

style="position: absolute; width:20%; color: black; text-align: left; overflow: visible;"

You can make some adjustment according to your use case

U.Aasd0
Related