blazor-docs/knowledge-base/daterangepicker-reposition-labels.md

title	description	type	page_title	slug	position	tags	res_type
Reposition the labels of the DateRangePicker	How to reposition the labels of the DateRangePicker	how-to	Reposition the labels of the DateRangePicker	daterangepicker-kb-reposition-labels			kb

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);
}