RadzenFormField rendering overlaying RadzenDropDown

Hello,

The label of RadzenFormField is overlaying the caption of the RadzenDropDown, when the selected values are empty.

image

Is there any way to change this behaviour?
To test it, just put this code on the radzen DropDown multiple selection source page.

@using RadzenBlazorDemos.Models.Northwind
@inherits DbContextPage

@code {
IList values = new int {};
IEnumerable products;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
products = dbContext.Products;
}
}

Hi @Ricardo_Silva,

See this forum topic:

1 Like

Hello again!

Two things:

  1. Is any way to make the RadzenFormField Text always stay on top? I think it looks ugly when it comes down inside the control...

  2. I have two RadzenDropDown in the same RadzenStack.
    The first one is rendering the RadzenFormField Text on top of the RadzenDropDown, the second one, not, and the code is the same.

@* Channels *@

<RadzenDropDown @bind-Value=@_selectedPublicationChannels
Data=@_publicationChannels
TextProperty="Name"
ValueProperty="Id"
Name="DropDownChannels"
PopupStyle="height: 400px"
Multiple=true AllowClear=false Placeholder="Select channels" Chips=true Style="width: 100%;" />

@* Markets *@

<RadzenDropDown @bind-Value=@_selectedMarkets
Data=@_markets
TextProperty="Name"
ValueProperty="Id"
Name="DropDownMarkets"
PopupStyle="height: 200px"
Multiple=true AllowClear=false Placeholder="Select markets" Chips=true Style="width: 100%;" />

So, I really think that this behavior it's a bug an not a feature.....

Hi @Ricardo_Silva,

I think we found a way to fix the label float above when there is a placeholder, and will do our best to include the fix with the next release. Still, keep in mind that RadzenFormField component was created solely because of the floating label functionality and disabling it makes the component redundant in most of the application scenarios.

Hello Yordanov!

I appreciate that, I really Love the Radzen Components!

I don't know if we are talking the same aspect of the RadzenFormField. I do want it to show the name of the field on top when it has a value, I don't like that when it is empty, that the name of the RadzenFormField goes to the "Input object" down. I would like that the label would always be on top, empty or not.
So, I don't think it's redundant, I don't find another way to show the label of the Input as in RadzenFormField. Or is there other way?

Hey @Ricardo_Silva,

We've just added (in v.4.23.8) a property to always display the label fixed on top that should cover your use case AllowFloatingLabel="false" :slight_smile:

https://blazor.radzen.com/form-field

1 Like