1

I am trying to create a Blazor EditForm on a registration page. The form looks correct apart from one rendering issue, where each Label that makes up the form is "wrapping" and starting on the line above it, as shown here:

A screenshot showing Labels wrapping inside a Blazor EditForm

I am working through this Blazor tutorial. At 9:00 minutes into the video, the presenter experiences the same issue I'm having, but resolves it by wrapping the contents of the form inside a RadzenCard element.

I have emulated that fix but the issue is persisting.

This is the code that I am using to generate the form:

<div class="row">
    <div class="col-12">
        <h2>Create a new account</h2>
        <EditForm Model="model" OnValidSubmit="RegisterUser">
            <RadzenCard>
                <DataAnnotationsValidator />
                <ValidationSummary />

                <label>First Name</label>
                <RadzenTextBox @bind-Value="model.FirstName"></RadzenTextBox>

                <label>Last Name</label>
                <RadzenTextBox @bind-Value="model.LastName"></RadzenTextBox>

                <label>Email</label>
                <RadzenTextBox @bind-Value="model.Email"></RadzenTextBox>

                <label>Password</label>
                <RadzenPassword @bind-Value="model.Password"></RadzenPassword>
                
                <label>Confirm Password</label>
                <RadzenPassword @bind-Value="model.ConfirmPassword"></RadzenPassword>
                <hr />
                <RadzenButton ButtonType="ButtonType.Submit" Text="Register"
                              ButtonStyle="ButtonStyle.Primary" class="btn-block mr-2" />
                <RadzenButton ButtonType="ButtonType.Button" Text="Login"
                              ButtonStyle="ButtonStyle.Secondary" class="btn-block mr-2" />
            </RadzenCard>
        </EditForm>
    </div>
</div>

In terms of attempted fixes, I have done the following:

  • I have copied the code directly from the source repo referenced in the tutorial to verify that there are no differences between my code and the code there.
  • I have tried placing each label within a distinct <div> tag, which successfully places each Label element on a distinct line but causes the textboxes to be misaligned.
  • I have tried placing <br> elements between each Label and while this resolves the issue, the textboxes are again misaligned.
  • Can I make a suggestion? The built in bootstrap floating lables are really nice and wouldn't suffer from this issue. https://getbootstrap.com/docs/5.0/forms/floating-labels/ Otherwise, toss them in a div with `class='d-flex'` – clamchoda Feb 26 '23 at 02:30

0 Answers0