Vertical align text in column/row

Radzen.Blazor Components
1

Hi

I'm having some trouble with vertical alignment of text elements in the code shown. I have stripped away my different failed attempts at adding classes, so i won't taint anyone :slight_smile:

            <RadzenColumn Gap="1rem" RowGap="1rem" Class="rz-m-0 rz-m-md-6">
                <RadzenRow Gap="1rem" RowGap="1rem">
                    <RadzenColumn Size="12" SizeMD="2">
                        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">First Turn</RadzenText>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="4">
                        <RadzenCheckBox @bind-Value=@player1Started></RadzenCheckBox>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="4">
                        <RadzenCheckBox @bind-Value=@player2Started></RadzenCheckBox>
                    </RadzenColumn>
                </RadzenRow>

It should be easy... But i can't seem to figure it out - any hints?

2

You might need to provide an example of what you are trying to achieve.

3

Good point! I want the text to be aligned to the vertical center of the text boxes. Now it's aligned to the top.

image

It seems like there is a margin in there... But no clue if that is my actual problem.

image

4

Use AlignItems:

<RadzenRow AlignItems="AlignItems.Center" ...>

image
image1666×680 29.5 KB

5

Unfortunately it didn't change anything:

image
image1032×531 112 KB

image
image822×199 3 KB

6

Add class="rz-m-0" to RadzenText to remove the default theme margins of RadzenText.

<RadzenText class="rz-m-0" TextStyle="TextStyle.Subtitle2" ... >

This should center everything. :crossed_fingers:

1 Like
7

Perfect! That fixed it - thank you :slight_smile: