How to Create Multiple Rows with Equal Label Width in Radzen Blazor Components?

Radzen.Blazor Components
1

Hi,

I am working on a layout in Blazor using Radzen components where I need to create multiple rows. On the left side of each row, there is a RadzenText, and on the right side, there is a RadzenTextBox. I would like all RadzenText labels to have the same width, based on the widest one. How can I achieve this without using JavaScript, just with Radzen controls and CSS?

Here’s an example of what I’m trying to do:

Label 1         [ TextBox ]
Longer Label 2  [ TextBox ]
Label 3         [ TextBox ]

Each label should automatically adapt to the width of the longest label. What’s the best way to implement this?

Thanks in advance for your help!

2

Here is an example using RadzenDataGrid:


@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<style>
    .rz-grid-table {
        width: unset;
    }
</style>

<RadzenDataGrid Data="@dbContext.Orders.Include("OrderDetails.Product").Take(5)">
    <Columns>
        <RadzenDataGridColumn Property="@nameof(Order.OrderDetails)" FilterProperty="Product.ProductName" Title="Product Name"
            Type="typeof(IEnumerable<OrderDetail>)" FilterOperator="FilterOperator.In" Sortable="false">
            <Template>
                @(string.Join(',', context.OrderDetails.Select(od => od.Product.ProductName)))
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Order.OrderDate)" Title="Order Date">
            <Template>
                <RadzenTextBox />
            </Template>
        </RadzenDataGridColumn>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

image
image1920×1080 157 KB

3

Not exactly what I need because I don't have to expose data but a list of controls, for example Name, Surname, Adrress, etc.

4

This is also data, still it's up to you if you are going to use my example or not:

<style>
    .rz-grid-table {
        width: unset;
    }
</style>

<RadzenDataGrid Data="@(new string[]{ "Name", "Surname", "Adrress" })">
    <Columns>
        <RadzenDataGridColumn>
            <Template>
                <RadzenText Text=@context />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn>
            <Template>
                <RadzenTextBox />
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

image
image1920×1080 135 KB

5

Good idea, I'll give it a try, thanks.
By the way, is there a way to dinamically resize RadzenColumn to fit the content?
Or if I set Size=1 the column with will be 1/12 of horizontal available space even if the remaining 11/12 are empty?

6

I'm not aware of such approach, maybe @yordanov will know.

7

Exactly. Here is example:

<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
    <RadzenColumn Size="4" class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Size="4"
    </RadzenColumn>
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Auto
    </RadzenColumn>
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Auto
    </RadzenColumn>
</RadzenRow>

image
image3136×226 12.8 KB

You can have a look at more examples here - Blazor Column Component | Free UI Components by Radzen

In your case you can use RadzenRow for each label:textbox pair and place each one of them in a separate column. Then set the same size of the label columns to make sure the textbox columns are properly aligned.