Kendo Dropdown - no vertical scroll bar

9 posts, 1 answers
  1. Clay
    Clay avatar
    2 posts
    Member since:
    May 2014

    Posted 13 Jan 2016 Link to this post

    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.
  2. Luke
    Luke avatar
    4 posts
    Member since:
    Mar 2014

    Posted 13 Jan 2016 Link to this post

    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.

  3. Answer
    Luke
    Luke avatar
    4 posts
    Member since:
    Mar 2014

    Posted 13 Jan 2016 Link to this post

    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.
  4. Clay
    Clay avatar
    2 posts
    Member since:
    May 2014

    Posted 14 Jan 2016 in reply to Luke Link to this post

    Thanks Luke,

    updating the kendo ui style sheets fixed the issue.

  5. Antony
    Antony avatar
    5 posts
    Member since:
    Sep 2017

    Posted 18 Dec 2017 Link to this post

    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). 

  6. Nencho
    Admin
    Nencho avatar
    1716 posts

    Posted 20 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Antony
    Antony avatar
    5 posts
    Member since:
    Sep 2017

    Posted 20 Dec 2017 in reply to Nencho Link to this post

    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

  8. Antony
    Antony avatar
    5 posts
    Member since:
    Sep 2017

    Posted 21 Dec 2017 Link to this post

    Also, to answer your question about the version I'm using it's v2017.3.913. 
  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2212 posts

    Posted 22 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top