How to format ScrollPanel by using CSS in GWT? - css

Question

in my Test.ui.xml
<g:ScrollPanel height="200px" addStyleNames="{res.css.scrollPanel}"> some widget here</g:ScrollPanel>
in css
.scrollPanel{
scrollbar-3dlight-color:#FFD700;
scrollbar-arrow-color:#FFFF00;
scrollbar-base-color:#FF6347;
scrollbar-darkshadow-color:#FFA500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#FF69B4;
scrollbar-shadow-color:#FF00FF;
}
It working perfectly in IE, but not in Firefox + Chrome? Why?
Interestingly, in the Gwt Code we got setting Background or color for ScrollPanel
ScrollPanel sp=new ScrollPanel();
sp.getElement().getStyle().setBackgroundColor("orange");
So, there must be a way to set background for ScrollPanel in Css right?
Seem only IE support scrollbar formatting,Chrome & Firefox don't.
so How to format ScrollPanel by using CSS in GWT that will work in all browser?

Answer 1

I've just checked and the following works for me fine in chrome
ScrollPanel scrollable = new ScrollPanel();
scrollable.getElement().getStyle().setBackgroundColor("orange");
putting the following in the css in a UiBinder file also works for me:
<ui:style>
.scrollable {
background-color:pink;
}
</ui:style>
and
addStyleNames='{style.scrollable}'
Are you sure the widget inside the scroll panel isn't taking up the whole panel and you're seeing that instead? If you populate it with anything else with a background colour, the orange will be behind it and disappear.
Something like this puts a scrollbar on webkit browsers:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: blue;
}
::-webkit-scrollbar-thumb {
background: red;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: blue;
}
(taken from https://productforums.google.com/forum/?hl=en#!category-topic/chrome/give-feature-feedback-and-suggestions/mGJ19Khi0SE and I just tested it with GWT ScrollPanel)