Recently Updated
Completed
Last Updated:
31 Oct 2022 13:01
by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by:
Richard
Comments:
3
Category:
TimePicker
Type:
Feature Request
The "SET" button is not visible when we open it and we are on the middle of the page: the button appears outside of the bottom of the page. So I have to close it, put the field to the top of the page, then open it again.
---
ADMIN EDIT
Some workaround, especially if most of your user base is on the same small form factor, is to use a bit of CSS to change the position of the dropdown to stick to the top of the viewport - this could potentially make it fit into screens as small as about 350x400px.
CSS
/*you can tweak the media query to target only the resolutions you want*/
@media(max-width: 500px) {
.top-aligned {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
/* you can also try translate(-50%, 50%) for a centered effect which may be better suited for laptop/tablet size */
}
}Component
Selected time: @selectedTime
<br />
<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
Format="dd MMM yyyy HH:mm:ss" Width="250px"
PopupClass="top-aligned">
</TelerikDateTimePicker>
@code {
private DateTime? selectedTime = DateTime.Now;
public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}
---