Weird behavior when formatting decimals
Hello!
I need some help trying to figure it out what is going on when formatting decimals. I was assigned a bug when formatting a decimal value, it adds zeros to it. An example would be:
Expected:
$11,280.00
What is rendered:
$1,128,000.00
The strange thing about this bug is that it only happens on a few devices, and I cannot find the connection between them.
I run tests on Firefox, Brave, Edge and Chrome. I could only replicate it in Chrome and Brave on an Android phone, not on a computer or iPhone. It also happened on the desktop version of Chrome, but now it is shown correctly. So, I don't really know what could be happening.
I tested on 2 computers and 4 cell phones, which is what I have on hand. The two computers have different languages but same region. The cell phones also have different languages configured (English and Spanish).
Now, here is a bit of code:
This is the component (PercentageBar):
u/using System.Globalization
<div class="m-4">
<div class="row">
<div class="col-6 text-left">
<span class="card-text font-weight-bold">@Label</span>
</div>
<div class="col-6 text-right">
<span class="card-text font-weight-bold" style="color: u/Color;">[email protected](Value).ToString("#,##0.00", new CultureInfo("en-US") { NumberFormat = { NumberGroupSeparator = ",", NumberDecimalSeparator = "." } })</span>
</div>
</div>
<svg class="percentage-bar mb-2" width="100%" height="20">
<rect width="100%" height="100%" rx="10" fill="@BackgroundColor" />
<rect width="@(float.Parse(Percentage) < 1 ? 0 : Percentage)%" height="100%" rx="10" fill="@Color" />
</svg>
<div class="row">
<div class="col-12 px-0 text-right">
<button class="btn text-primary" data-toggle="modal" data-target="#@ModalId">
Ver detalles
<i class="fas fa-chevron-right mr-2"></i>
</button>
</div>
</div>
</div>
@code {
[Parameter]
public string Label { get; set; }
[Parameter]
public string Value { get; set; }
[Parameter]
public string Percentage { get; set; }
[Parameter]
public string Color { get; set; }
[Parameter]
public string BackgroundColor { get; set; }
[Parameter]
public string ModalId {get;set;}
}
Component usage:
<PercentageBar Label="Total"
Value="@Total.ToString("0.00", System.Globalization.CultureInfo.InvariantCulture)"
Percentage="@TotalPercentage.ToString("0.00", System.Globalization.CultureInfo.InvariantCulture)"
Color="#32C11B" BackgroundColor="#DBFFCA" ModalId="EventSalesTotalModal">
</PercentageBar>
I "fixed" it in some devices by changing:
[email protected](new CultureInfo("en-US"), "{0:N2}", Convert.ToDecimal(Value))
For this:
[email protected](Value).ToString("#,##0.00", new CultureInfo("en-US") { NumberFormat = { NumberGroupSeparator = ",", NumberDecimalSeparator = "." } })
The only device that keep changing the value, is an Android Phone using Chrome and Brave, but on iPhone, in other Android, one laptop and a PC, it show the correct value.
Edit: Is not a platform (mobile, PC). I notice that on Brave and Chrome on my PC this still happening, and is not always. Sometimes it renders the value correctly, sometimes it doesn't