How to customize scroll bars with CSS for kendo window contents

4 posts, 0 answers
  1. Praveen
    Praveen avatar
    1 posts
    Member since:
    Dec 2013

    Posted 08 Jan 2014 Link to this post

    I want to change the look and feel of the scroll bars coming over the kendo window contents or components. Is there any way to change the style of scroll bar.  
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 09 Jan 2014 Link to this post

    Hi Praveen,

    Yes, you can apply scrollbar styles to the .k-window-content class. Please note that scrollbar-related script-based plugins are not supported for autogenerated Kendo UI elements, because they modify the DOM. If you want to use a script-based scrollbar plugin for the Window, you should do the following:

    1. Do not set height to the Window, so that it can expand, according to its content, and the Window's scrollbar is never used

    2. Remove the padding of the .k-window-content element with a CSS rule, which has specificity greater than 0,0,1,1 (also known as 11)
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    3. Add some <div> or another container with a set height inside the Window content.

    4. Apply the scrollbar plugin to your <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!
  3. Kendo UI is VS 2017 Ready
  4. Mohnish
    Mohnish avatar
    9 posts
    Member since:
    Mar 2016

    Posted 23 Mar in reply to Dimo Link to this post

    Hi, I want to implement iscroll and I use kendo. Can you plz suggest me in implementing iscroll.

    Thanks in advance.

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 23 Mar Link to this post

    Hello Mohnish,

    The <div> which contains all the Kendo UI Window content and which is normally scrollable is the Window widget element, that is a <div class="k-window-content">. The same <div> also holds the ID attribute of the Kendo UI Window, if such exists.

    http://docs.telerik.com/kendo-ui/controls/layout/window/overview#html-structure-and-dom-placement

    http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

    You can try initializing the custom iScroll widget, taking into account the above information. However, please note that we do not support integration with third-party scroll widgets, especially ones that modify the DOM. Undesired side effects may occur.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready