How to apply styles for GWT scrollbar

Question

I 've tried to give css to scrollpanel in GWT. But its not working.

The problem is I want to change the foregroung and background colors and also the width of scrollers.

Is it possible? can any1 suggest?

Answer 1

Generally it is based on the browser user agent.

For example : For Chrome You need to do something like,

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Please refer this Link

Answer 2

GWT scrollbars are simply html ones, so you can style them in the same way you would do with plain html: using css.

Add a class to your ScrollPanel and set the styles in your .css files, or set styles to it using java methods.

But you have to be aware that styling scroll-bars is not a standard thing, webkit supports it via vendor-css-properties and the same with IE, but unfortunately you will not be able to style FF.

UPDATE:

As @Andrea suggest in the comment below, if you can change in your app ScrollPanel by CustomScrollPanel you have much more options to customize bars.

In this case you have to provide your own bars because by default it uses browser native ones. This response can help you.