[Bug]: Solely DatePicker has the picking calendar off the input

[tesar-tech]

Blazorise Version

1.6.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

https://github.com/tesar-tech/EptTest2/blob/master/EptTest2.Client/CompWithInput.razor

Steps to reproduce

Use code from the docs in an empty page

<DatePicker TValue="DateTime?" @bind-Date="@value" />

@code {
    DateTime? value;
}

Run the code, click the input to select the date.

What is expected?

Normal date picker experience

What is actually happening?

The calendar is render on the bottom of the page

What browsers do you see the problem on?

Brave

Any additional comments?

This is caused by the absolute positioning of the calendar div https://github.com/Megabit/Blazorise/blob/db86a8c059443870ee8345b407f35d8c7365d20c/Source/Blazorise/wwwroot/blazorise.css#L1124

It works fine when the outer element has a relative positioning, like

<div style="position: relative">
<DatePicker TValue="DateTime?" @bind-Date="@value" />
</div>

@code {
    DateTime? value;
}

Which is exactly the case in Blazorise docs.

Tested on bs,bs5, bulma, but seems like provider-independant issue.

If not fixed, it should be at least mentioned in the docs.

[stsrki]

We are already aware of this limitation. That's why we have introduced bool StaticPicker parameter that makes the calendar position in either absolute or static.

Also, by convention, the DatePicker should be placed in the Field, or in some other container component, like Card, that has position: relative. So the problem should not be visible to the end-user as it is unlikely that DatePicker will be used on its own.

I am closing the ticket now.