Unplanned
Last Updated:
04 Jun 2026 11:05
by Marco
Marco
Created on:
04 Jun 2026 11:05
Type:
Bug Report
FloatingLabel not vertically aligned when using Small or Large input Size
The Floating Label component position is correct only when using it with medium-sized inputs.
Here is a possible workaround - please adjust the exact pixel values, according to the CSS theme and your preferences.
https://blazorrepl.telerik.com/QUuKYyPu56EBMuTm11 (uses the new Meridian theme by default)
<TelerikFloatingLabel Text="Your Name" Class="small-fl">
<TelerikTextBox @bind-Value="@Name" Size="sm" Width="200px" />
</TelerikFloatingLabel>
<TelerikFloatingLabel Text="Your Name">
<TelerikTextBox @bind-Value="@Name" Width="200px" />
</TelerikFloatingLabel>
<TelerikFloatingLabel Text="Your Name" Class="large-fl">
<TelerikTextBox @bind-Value="@Name" Size="lg" Width="200px" />
</TelerikFloatingLabel>
<style>
.small-fl {
--kendo-floating-label-offset-y: 23px;
}
.large-fl {
--kendo-floating-label-offset-y: 31px;
}
</style>
@code {
private string Name { get; set; } = string.Empty;
}For the old Default theme, the workaround is:
.small-fl {
--kendo-floating-label-offset-y: 23px;
}
.large-fl {
--kendo-floating-label-offset-y: 31px;
}
0 comments