RadzenNumeric not aligning text to right

Radzen.Blazor Components
1

Blazer Server project.
I have a RadzenNumeric that does not show the text aligned to the right.
The component is in a table cell. I have tried a style in the cell and in the component ( Style="text-align: right")

How can I get the text to align ?

2

You might need to check this demo:

3

Still not working.
I created a new C# Blazor Server project, Visual Studio 2022, .net 6, Radzen.Blazor 4.2.0. Modified Index.razor as shown below, which is basically a copy/paste from the numeric example. The values are aligned left.

The rendered code is

Page Code:

@page "/"
@using Radzen
@using Radzen.Blazor

<PageTitle>Index</PageTitle>

<h1>Radzen test</h1>

Welcome to your new app.

<div class="col-lg-3 p-3">
    <RadzenCard>
        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Text-Align Right</RadzenText>
        <RadzenNumeric TValue="int?" @bind-Value=@value Placeholder="Enter or clear value" Change="@(args => OnChange(args, "Without Up/Down"))" Class="w-100" TextAlign="TextAlign.Right" />
    </RadzenCard>
</div>

@*<EventConsole @ref=@console Class="mt-4" />
*@

@code {
    int? value;

  //  EventConsole console;

    void OnChange(dynamic value, string name)
    {
        //console.Log($"{name} value changed to {value}");
    }
        }
4

Can you share a screenshot of the page?

5

image
image1714×863 87 KB

6

The computed styles indicate this is from the bootstrap.min.css
image

7

And I found my problem, The line
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
was missing

Thanks for offering suggestions.

8

You also seem to are missing the CSS theme of the components which defines the appearance. The RadzenNumeric renders "naked" in your screenshot.

9

It seems as if someone has blown up in the demo, as it is not aligning right in the demo (on chrome).

image
image799×275 5.63 KB

10

Thanks for spotting that @Roune!

Will be fixed with the upcoming release.

1 Like