Completed
Last Updated:
31 Oct 2022 13:01
by ADMIN
Release 3.7.0 (09 Nov 2022)
Richard
Created on:
30 Mar 2020 14:18
Category:
TimePicker
Type:
Feature Request
[Mobile] Make the time picker popup always fit in the screen
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);
}
---
3 comments
ADMIN
Joana
Posted on:
17 Oct 2022 10:15
ADMIN
Marin Bratanov
Posted on:
20 May 2021 11:24
ADMIN
Marin Bratanov
Posted on:
03 Apr 2020 15:40