How to apply vertical scroll bar to kendo listview?

6 posts, 0 answers
  1. Parthasarathi
    Parthasarathi avatar
    24 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2013 Link to this post

    Hi All,

    I am using listview in some of the mvc views. When page size is increased,e.g,50 items per page, records are coming out of the listview. To fix this issue, how to apply vertical scroll bar to kendo listview? Immediate help would be appreciated.

    Regards,
    Partha.
  2.
  3. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 18 Jan 2013 Link to this post

    Hi Partha,

    The ListView itself does not provide a built-in configurable scrolling functionality, but you can enable it easily with CSS just like for a regular <div> element. For example:

    #ListViewID
    {
         height: 400px;
         overflow: auto;
    }

    You can also use max-height instead of height, so that the widget resizes automatically if it has a small number of items.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ariel
    Ariel avatar
    1 posts
    Member since:
    Jul 2013

    Posted 23 Jul 2013 Link to this post

    Yes, but how i add an scroll without fixing the height?
  7. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 24 Jul 2013 Link to this post

    Hello Ariel,

    Can you do that with a plain <div> element?

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Jeremy
    Jeremy avatar
    3 posts
    Member since:
    Jul 2017

    Posted 12 Feb 2018 Link to this post

    This worked, except now it put an unnecessary left-right scrollbar on the list
  11. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 14 Feb 2018 Link to this post

    Hello Jeremy,

    You could also try setting ​overflow-y: auto​ instead of overflow: auto:
    https://dojo.telerik.com/imUvU

    If you are sure that horizontal scrolling will not be needed for your ListView at any point, you can also apply overflow-x: hidden.

    Regards,
    Tsvetina
    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