Is there a way to create a progress bar with a label positioned to the right using Bootstrap v5.2 Progress Bar?
https://i.sstatic.net/gOWie.png
I attempted to use negative margins to achieve this layout but faced issues when the label expanded due to longer text:
https://i.sstatic.net/u0vvo.png
Here is the code I used:
For a single row (ProgressBarWithName.cshtml):
@{
var valuePercentage = (double)Model.Value / Model.MaxValue * 100;
}
<div class="row m-2" style="height: 50px;">
<div class="col-3 text-white bg-dark h-100 d-flex justify-content-end">
<div class="font-allan align-self-center"><b>@Model.Name</b></div>
</div>
<div class="col-9 h-100">
<div class="row gx-0 progress-container h-100">
<div class="col-11">
<div class="progress h-100">
<div class="progress-bar"
role="progressbar" aria-label="Example with label"
aria-valuenow="@valuePercentage" aria-valuemin="0" aria-valuemax="@Model.MaxValue"
style="width: @valuePercentage%;">
</div>
</div>
</div>
<div class="col-1 progress-label align-self-center">
<b class="@if (valuePercentage > 85){ <text>text-white</text> }">@Model.Value</b>
</div>
</div>
</div>
</div>
For all rows (CustomBarChart.cshtml):
<div>
@foreach (var item in Model.Items)
{
await Html.RenderPartialAsync("ProgressBarWithName", item);
}
</div>
For testing purposes, I created some hardcoded models:
@{
var stat = new Stat("Some Stat", 40, 100);
var stat1 = new Stat("Some Stat1", 84, 100);
var stat2 = new Stat("Some Stat2", 86, 100);
var stat3 = new Stat("Some Stat3", 10, 100);
var stat4 = new Stat("Some Stat4", 100, 100);
var stats = new Stats(new List<Stat> { stat, stat1, stat2, stat3, stat4 });
await Html.RenderPartialAsync("CustomBarChart", stats);
}
CSS:
.progress-container{
margin-right: -60px;
}
.progress-label{
margin-left: -35px;
width: 0;
}
The issue I encountered was that the default style of the bootstrap progress bar positions the label in the filled part of the bar. I aim to have the label on the right side of the entire bar, whether in the filled portion or the background. I experimented with using float, but due to the row/col structure I'm using for the grid style, I faced challenges.