RadzenRow or Bootstrap Row not working properly

Radzen.Blazor Components
1

I'm having problems with right align in my Blazor WASM app.

I get two different results. Neither really work.

This adds "Name" right next to "Dashbaord".

<RadzenRow>
            <div style="text-align: left">
            <RadzenIcon Icon="assessment">
            </RadzenIcon>
            <RadzenHeading Size="H1" style="display: inline-block" Text="Dashboard">
            </RadzenHeading>
            </div>
            <div style="text-align: right">
            <RadzenHeading Size="H1" style="display: inline-block" Text="Name">
            </RadzenHeading>
            </div>
        </RadzenRow>

This moves "Name" down and to the far right.

<Row>
            <div style="text-align: left">
            <RadzenIcon Icon="assessment">
            </RadzenIcon>
            <RadzenHeading Size="H1" style="display: inline-block" Text="Dashboard">
            </RadzenHeading>
            </div>
            <div style="text-align: right">
            <RadzenHeading Size="H1" style="display: inline-block" Text="Name">
            </RadzenHeading>
            </div>
        </Row>

The behavior I'm looking for is "Dashboard" on the left and "Name" on the far right. They should be in the same row.

Setting up Bootstrap columns doesn't seem to work either.

<row>
            <div class="col-md-12 col-xl-3 col-lg-6">
                <div class="col-md-12 col-6">
                    <div style="text-align: left">
                    <RadzenIcon Icon="assessment">
                    </RadzenIcon>
                    <RadzenHeading Size="H1" style="display: inline-block" Text="Dashboard">
                    </RadzenHeading>
                    </div>
                </div>
                <div class="col-md-12 col-6">
                    <div style="text-align: right">
                    <RadzenHeading Size="H1" style="display: inline-block" Text="Name">
                    </RadzenHeading>
                    </div>
                </div>
            </div>
        </row>

<div class="container">
            <row>    
                <div class="col">
                    <RadzenIcon Icon="assessment">
                    </RadzenIcon>
                    <RadzenHeading Size="H1" style="display: inline-block" Text="Dashboard">
                    </RadzenHeading>
                </div>
                <div class="col">
                    <RadzenHeading Size="H1" style="display: inline-block; text-align: right" Text="Name">
                    </RadzenHeading>    
                </div>
            </row>
        </div>

Does anyone know how to right-align text in a Blazor WASM Page using Radzen?

Thanks!

2

This makes no sense to me, but it works. I just kept trying different combinations until it worked.

<div class="row">
            <div class="col">
                <div class="row">
                <div class="col">
                    <div style="text-align: left">
                    <RadzenIcon Icon="assessment">
                    </RadzenIcon>
                    <RadzenHeading Size="H1" style="display: inline-block" Text="Dashboard">
                    </RadzenHeading>
                    </div>
                </div>
                <div class="col">
                    <div style="text-align: right">
                    <RadzenHeading Size="H1" style="display: inline-block" Text="Name">
                    </RadzenHeading>
                    </div>
                </div>
                </div>
            </div>
        </div>
3

You should use RadzenColumn inside RadzenRow, see Blazor Column component demos.

Here is the layout utilising Radzen.Blazor components and CSS classes only:

<RadzenRow>
    <RadzenColumn>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
            <RadzenIcon Icon="assessment"></RadzenIcon>
            <RadzenHeading Size="H1" Text="Dashboard" Class="rz-m-0"></RadzenHeading>
        </RadzenStack>
    </RadzenColumn>
    <RadzenColumn Class="rz-text-align-right rz-m-0">
        <RadzenHeading Size="H1" Text="Name"></RadzenHeading>
    </RadzenColumn>
</RadzenRow>