[Solved] How to customize scroll bars with CSS for kendo window contents

[Praveen]

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.  

[Dimo]

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

[Mohnish]

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

Thanks in advance.

[Dimo]

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