Kendo Dropdown - no vertical scroll bar

[Clay]

I am using the the kendo dropdown (HTML5 script), and this issue popped up recently where the vertical scroll bar is missing and the values that should be hidden show through the  kendo window the drop down is in. Has anyone seen this issue before and know how to fix it.

[Luke]

I also just came across this issue after updating to Q1 2016 (2016.1.112). Quick solution for me was to add a CSS override to my stylesheet. 

.k-list-scroller {
    overflow-y: scroll;
}

Have yet to have a look around and see if this affects any other controls.

[Luke]

Turns out for me I updated all the Kendo script files (*.js), but neglected to update the *.css files. Updating my kendo css files to the latest versions resolved the root cause.

[Clay]

Thanks Luke,

updating the kendo ui style sheets fixed the issue.

[Antony]

I'm using the MVC API and had this same issue with the TimePickerFor control. 

I added the CSS override but the scroll bar is unusable (see attached image). 

[Nencho]

Hello Antony,

Could you share the version of our components that you use? In addition, it would be helpful if you could provide us with the entire implementation for the Picker that you use, so we could test the behavior locally. Also, you mentioned that the scrollbar is unusable, but I am afraid that I am unable to see any scroll bar in the attached image. This is why, you can try setting a specific height for the dropdown of the picker:

<style>
  .k-list-scroller{
    height: 800px !important;
  }
</style>

Regards,
Nencho
Progress Telerik

[Antony]

Hi Nencho,

Thank you for the response. 

I'm attached an image to show how it displays without the CSS override. In the image I first attached you can see that the scroll bar is present, but it isn't clickable. I can however select an item, open the dropdown again and use the arrow keys to get to the items further down the list. 

The additional setting of the height you posted doesn't affect the time picker, but does affect the general drop down list control which I have used elsewhere. 

Here is a snippet of the column bounding within my cshtml file:

cols.Bound(e => e.StartTime).Groupable(false).Format("{0:HH:mm}").EditorTemplateName("Time");

The "Time" editor template file:

@model DateTime?

@(Html.Kendo().TimePickerFor(m => m)
    .Format("HH:mm")
)

Regards,

Antony

[Antony]

Also, to answer your question about the version I'm using it's v2017.3.913. 

[Konstantin Dikov]

Hello Antony,

It seems that you have some custom CSS on the page that overrides the default styles of the dropdown of the picker, so you could inspect the applied styles in the browser for the container of the dropdown and see which custom styles are overriding the height and the scrolling. Note that the following should fix the height and enable the scrolling if there are no other custom styles with "!important" that you are using in your application:

<style>
    .k-list-scroller {
        height: 200px!important;
        overflow-y: scroll!important;
    }
</style>

Regards,
Konstantin Dikov
Progress Telerik