There is already topic for this https://github.com/telerik/kendo-angular/issues/4624
So the issue is that when screen zooms to 200%, timepicker loses it's visibility. Note that timepicker is inside kendo-drawer as a part of form. Scrollbar on drawer appears, but it is impossible to scroll down. I know that one of the solutions is to use adaptiveMode set to auto, but also in that case when in kendo drawer, seems to attach to drawer instead to center itself. It gets impossible to choose time as hours/minutes lists are invisible.
Both cases are attached.
1 Answer, 1 is accepted
Hi Miljana,
Thank you for the details provided.
The described issue sounds similar to the scenario covered in the following Knowledge Base article:
In the above article, there is a solution for scenarios when, on smaller resolutions (or higher zoom levels), the popup of the DateTimePicker (placed inside a Dialog) can extend past the visible viewport, and the picker automatically closes its popup once the anchor input scrolls out of view - this is intentional, so the popup does not stay open anchored to an element that is no longer visible.
When the TimePicker is placed inside a Drawer, the surrounding layout can make the anchor reach the edge of the viewport before the rest of the popup becomes reachable, which produces exactly the behavior you described - scrolling the page down closes the popup before it can be seen fully.
In this line of thought, the solution documented for the identical Dialog scenario can be applied to the Drawer as well - giving it `position: absolute` lets the browser correctly extend the page's scrollable area to include the full popup, so the page can be scrolled normally to reveal it instead of the anchor leaving the viewport prematurely:
<kendo-drawer style="position: absolute" [items]="items">...</kendo-drawer>Here is also a StackBlitz example, implementing a TimePicker inside a Drawer that has `position: absolute` set:
It is important to mention that, when testing the above example on my side, the popup stays reachable when the Drawer's own content is scrollable (i.e. the Drawer has its own scrollbar, separate from the page) even without the `position: absolute` style. In my testing attempt, it is only when scrolling down the page itself that the anchor hits the viewport edge first and the popup closes, which gets resolved by `position: absolute`.
On that note, could you please check out the above example and let me know how it differs from the markup in your application, so we can further investigate why even scrolling the Drawer itself makes the TimePicker unreachable on your side. Thank you in advance for your cooperation.
Let me know if the above suggestion resolves the issue, or if you can share your Drawer markup so I can suggest something more targeted.
Regards,
Zornitsa
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.
Rank 2
Iron
Iron
Hi, Zornitsa,
I have made drawer to have position absolute. There is an issue at zoom 400% (even starts at 300%+). If datepicker that contains popup gets scrolled out of viewport, datetime/date/time picker will close itself.
In case when I use adaptiveMode='auto', datepicker works fine, but in time picker hours and minutes are not visible. If I try to adapt height of timepicker, then list that contains hours and minutes messes up and highlighted hours are not matching selected ones. So I am still trying to find solution for zoom 200% up to 400% regarding these 3 pickers (inside drawer).
Hi Miljana,
Thank you for the additional details and for testing with `position: absolute` on the Drawer.
To provide further clarification, the behavior at 300%-400% zoom comes from how the popups work. The DatePicker, TimePicker, and DateTimePicker close their popup when the input they are anchored to scrolls out of the viewport, so the popup does not stay open for an element that is no longer visible. At these zoom levels, the viewport becomes very small, so the anchor leaves the visible area almost immediately once the page scrolls, and the popup closes.
Furthermore, it is worth being transparent that browser zoom is not a scenario the Kendo UI for Angular components officially support out of the box. The 200% case could be improved with the suggested `position: absolute` approach, but in general, higher zoom levels fall outside what the components are designed and tested for.
For reference, a similar zoom report linked below was reviewed previously and closed with the same conclusion:
Regarding the described issue when using `adaptiveMode="auto"`, a misalignment of the hours and minutes in the adaptive time selector popup is already tracked as a bug in the following GitHub issue:
Feel free to subscribe to the above issue if it aligns with the experienced issue on your side. In general, overriding the column height can make the problem worse, because the lists are laid out and scrolled based on their internal height, which can explain why the highlighted values no longer match the selected ones, thus it would be best to remove such overrides.
With the above being said, here are a few approaches that can help for small viewports and high zoom levels:
- Use `adaptiveMode="auto"` for the DatePicker and DateTimePicker, where it already works as expected, and keep the TimePicker without custom height styles.
- Set the adaptiveTitle and adaptiveSubtitle properties so the adaptive view stays clear.
- Consider switching the components to their adaptive layout only for small screens by toggling the adaptive mode setting dynamically, so the popup is not tied to the anchor position inside the Drawer.
Please observe the provided information and let me know if the bug report does not match the adaptive mode issue you experienced on your side.
Regards,
Zornitsa
Progress Telerik