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
26
[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

Hi everyone,

We are working on an Adaptive rendering for all our pickers and selects. `AdaptiveMode.Auto` parameter will enable the adaptive feature for the timepicker and different rendering for the resolutions. Below you can find the resolution breakpoints and short description of the rendering:

- Small(up to 500px) - full screen dialog
- Medium(up to 768px) - dialog docked to the bottom of the screen
- Large(over 768px) - essentially being our current (popup/fly out) rendering.

Regards,
Joana
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Marin Bratanov
Posted on: 20 May 2021 11:24

Hello all,

I have edited the opener post to suggest a potential CSS workaround you can consider.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Marin Bratanov
Posted on: 03 Apr 2020 15:40

To add some context - we may actually make the popup a modal window that is centered in the screen, like the native date/time pickers do - with the current design where the popup is attached to the input there are scenarios that cannot be fixed at all, so this needs to be re-invented for mobile altogether.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.