Progress bar value > 100

Radzen Studio Blazor Server
1

I have a progress bar where I need to show consumption against a budget and it some cases the consumption exceeds the budget.

The progress bar seems to extend beyond the max width is such cases.

image

This is the code

<RadzenProgressBar Mode="ProgressBarMode.Determinate" Style="height: 13px; margin-top: 13px; margin-bottom: 10px; max-width: 100%" @bind-Value="@TeamSpendPercent" ShowValue="true"></RadzenProgressBar>

Here is the rendered HTML

<div style="height: 13px; margin-top: 13px; margin-bottom: 10px; max-width: 100%" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all ui-progressbar-determinate" aria-valuenow="136"><!--!-->
            <div class="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" style="display: block; width: 136%;"></div><!--!-->
                <div class="ui-progressbar-label" style="display: block;">136%</div><!--!-->
        </div>

Please help.

2

Hi @BlazorGeek,

The Radzen ProgressBar doesn't currently handle this case. We will probably add support for values > 100% in a future release.

1 Like
3

Thank you @korchev
Having a separate property to set for progress bar text would be helpful as well.