[Solved] Timepicker not accessible when screen zooms to 200%

[Miljana]

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.

 

[Zornitsa]

Hi Miljana,

Thank you for the details provided.

The described issue sounds similar to the scenario covered in the following Knowledge Base article:

• https://www.telerik.com/kendo-angular-ui/components/knowledge-base/datetimepicker-inside-dialog/ 

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:

• https://stackblitz.com/edit/mtgz4lah 

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