Duplicated
Last Updated: 28 Sep 2022 11:46 by ADMIN
Dustin
Created on: 27 Sep 2022 20:43
Category: Kendo UI for Angular
Type: Bug Report
0
Angular DatePicker vertical scroll bar still clickable when hidden

The DatePicker control for Angular has a hidden vertical scrollbar on the kendo-virtualization element, which is nested inside the kendo-calendar-navigation and kendo-calendar-viewlist elements. Though it is hidden from view, it is still clickable, and can obscure the selectable dates in the calendar. Clicking it results in activating the scrollbar, which will result in the navigation sidebar scrolling. 

I have attached two screenshots to show the affected areas. Highlighted in red are the areas that when clicked will activate the sidebar scrollbar, and highlighted in blue is the area that will activate the calendar scrollbar, along with their respective elements in the DOM.

It appears the scrollbar is hidden from view via a combination of padding and margin settings from the css below:

.k-calendar .k-content.k-scrollable,
.k-calendar .k-calendar-content.k-scrollable {
    box-sizing: content-box;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding-right: 100px;
    padding-left: 100px;
    margin-left: -100px;
    margin-right: -117px;
}

I am using Edge Version 105.0.1343.50

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
1 comment
ADMIN
Martin
Posted on: 28 Sep 2022 11:46

Hi Dustin,

Thank you for the provided feedback.

Indeed this is a known issue on our side that is already been tracked here:

https://github.com/telerik/kendo-angular/issues/3769

Subscribe for the issue in order to be notified in a timely manner when there is any update.

Please accept our apologies for the caused inconvenience.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.