Trouble with RadzenFormField and layout

Radzen Blazor Studio
1

I really like the look of the RadzenFormField component and I'd like to use them in my app.

Unfortunately, I can't seem to determine why the text of the form field displays to the right side of my textbox:

Capture

I named the FormField "StreetFF" for troubleshooting. Is it possible some of my layout/formatting is causing an issue? I'm using pages originally generated by Radzen Blazor Studio and I'd like to keep my layout compatible with Radzen in case I want to change themes later.

<Tabs>
                    <RadzenTabsItem Text="Property">
                    <RadzenColumn> 
                    <RadzenFieldset Text="Address Details">
                        <RadzenRow style="margin-bottom: 1rem">
                            <RadzenColumn SizeMD="12">
                            <RadzenFormField Text="StreetFF">
                                <ChildContent>
                                <RadzenTextBox @bind-Value="@newOpportunity.Street" Name="Street" />
                                </ChildContent>
                                <Helper>
                                <RadzenRequiredValidator Component="Street" Text="Street is required" />
                                </Helper>
                                </RadzenFormField>
                            </RadzenColumn>
                        </RadzenRow>
2

Hi @DB1234,

I could not reproduce the issue in the online demos:

image

The misalignment is most probably a result of some custom styling. You can use DevTools to inspect the element and see what is causing it.

On a side note, noticed that you have RadzenColumn placed directly inside RadzenTabsItem. You should always place RadzenColumn inside RadzenRow.

<RadzenTabsItem Text="Property">
    <RadzenRow> <-- This is missing
        <RadzenColumn>
3

Your application could also be using an older version of Radzen.Blazor which doesn't include RadzenFormField.

4

Thanks for the reply, I'm using v4.10.2 (latest is 4.10.3?).

The docs don't list the minimum version for FormField.

5

Thanks, I'll move the Column into a Row.

Is there some documentation that would help me make sure I'm following any other rules like this?

6

I found it here:

https://blazor.radzen.com/column

7

@yordanov is their plans to update dropdowns to also include this feature at some point?

8

@kest874 if your ask is about a dropdown with a floating label, it is available already. All you have to do is to place <RadzenDropDown> inside a <RadzenFormField>. See the input types example on the form field demo page.

<RadzenFormField Text="RadzenDropDown">
    <RadzenDropDown ... />
</RadzenFormField>

image

9

Hello radzen team,
im going to use RadzenFormField with radzen 2.84.8 & Radzen.Blazor 4.10.4 but i cant get it to work.
Radzen generates no "RadzenRow" or "RadzenColumn". Only "div" with classes.

@using Trent.Models.Trentdb
@using Microsoft.AspNetCore.Identity;
@using Trent.Models
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles="Authenticated, Developer")]
@inject Microsoft.Extensions.Localization.IStringLocalizer<Test> L
<PageTitle>Test</PageTitle>
<RadzenContent Container="main">
  <ChildContent>
    <RadzenHeading Size="H1" Text="Test">
    </RadzenHeading>
    <div class="row">
      <div class="col-md-3">
        <RadzenFormField Text="PLZ" Variant="Variant.Outlined">
          <ChildContent>
            <RadzenTextBox Placeholder="Ort" style="width: 100%" Name="Textbox0">
            </RadzenTextBox>
          </ChildContent>
        </RadzenFormField>
      </div>
    </div>
  </ChildContent>
</RadzenContent>

And i only can insert a RadzenTextbox via Template.
So the code looks like above.

Did i miss something? How can i get this to work?

Thomas

10

Only Radzen Blazor Studio generates RadzenRow and RadzenColumn.

11

That means that i can not use RadzenFormfield from Radzen Studio?
or only with RadzenHtml?

12

You can use RadzenFormField by dragging and dropping it from the toolbox.
form-field