Reposition the labels of the DateRangePicker
Environment
Product | DateRangePicker for Blazor |
Description
I would like to reposition the labels of the DateRangePicker so that they are on the same line as the date inputs.
Solution
By design the labels of the DateRangePicker are placed above the date inputs. If you would like to reposition them you could use CSS. A sample implementation of that can be seen in the example below.
@*Reposition the labels of the DateRangePicker so that they are on the same line as the date inputs*@
<style>
.reposition-labels .k-floating-label-container {
padding-top: 0;
width: auto;
flex-direction: row-reverse;
align-items: center;
}
.reposition-labels .k-floating-label-container > label {
position: static;
margin: 0 .5em;
}
</style>
<TelerikDateRangePicker @bind-StartValue="@StartValue"
@bind-EndValue="@EndValue"
Class="reposition-labels">
</TelerikDateRangePicker>
@code {
public DateTime? StartValue { get; set; } = DateTime.Now;
public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10);
}