DatePicker and Label on same line

[Michael Tigar]

Given the following, how can I get your SfDatePicker to be on the same line as its Label?

        <div class="grid-container">
            <div class="grid-child">
                <label style="margin-left:10px; font-size:larger">Keep common</label>
                <RadzenSwitch @bind-Value=@IsSticky Style="margin-left:5px"/>
            </div>
            <div class="grid-child" style="max-width:200px">
                <label style="font-size:larger">Archive Date:</label>
                <SfDatePicker TValue="DateTime" Value="@_archiveDate">
                    <DatePickerEvents TValue="DateTime" ValueChange="MyHandler"></DatePickerEvents>
                </SfDatePicker>
            </div>
        </div>

Many Thanks (in advance)!

[Kokila Poovendran]

Hi Michael Tigar,

Greetings from Syncfusion Support!

We understand that you would like to have the SfDatePicker aligned on the same line as its corresponding label. We have prepared a sample based on your requirement. You can find the sample with the necessary style overrides in the link provided below:

<style>

    .e-input-group, .e-input-group.e-control-wrapper {

        position: absolute;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/htVJZhjBUjgdhpck

By applying the provided style overrides, both the label and the date picker will appear on the same line as demonstrated in the sample.

Should you have any further questions or concerns, please feel free to reach out to us.