CODEWITHSUNDEEP
cssgwtgwtp
Kiti
Kiti

Reputation: 543

How to format ScrollPanel by using CSS in GWT?

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?

Upvotes: 1

Views: 1606

Answers (1)

tom
tom

Reputation: 2712

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)

Upvotes: 1

Related Questions