Changing appearance like color width,... of Scrollbar

[Stetograph]

Heyho people,


I'm having a TreeGrid, for which a scroll bar appears, when it gets too big.
This works really nice with GXT Just fix the height and it'll scrollable.
As I'm new to CSS and Webstylings, the more tricky part for me is concerned with styling the scroll bar. So for me its even not sure, if this is the right question, for this forum. If not please tell me

The current non-working trial to accomplish this looks like the following:

//setting the classname for the scrollable grid
this.processContentTreeGrid.setStylePrimaryName("instanceGridButtonTriggered");


//setting the css properties for changing the scroll bar appearance
.instanceGridButtonTriggered::-webkit-slider-thumb:vertical {
    background-color: #000000;
    width: 50px;
}

Is it generally possible in GXT to customize the scroll bar's? If yes how?
Does this have to be done purely with CSS (and if so, any hint how to?)?



Greetz and a nice day to all
Stefan

[Stetograph]

In addition to the above trial a second trial was accomplished. The GridAppearance was customized too. In the GridAppearance a CSS-class, named .scroller is defined for the scrollable element.

I tried this too, withouth any success:

.scroller::-webkit-slider-thumb {
    background-color: #000000 !important;
    width: 50px;
}

[Colin Alworth]

this.processContentTreeGrid.setStylePrimaryName("instanceGridButtonTriggered");

Did you read the javadocs for that method? I don't think it does what you think it does. Try addStyleName instead.

.scroller::-webkit-slider-thumb {...}

Is this in a CssResource in your app? If not, that class name will be obfuscated when it is used, and since your css isn't, you class won't apply. This CssResource belongs in a new appearance, extending from the Grid's default appearance.

Other options: get a reference to the scroller object and add an additional css class name that matches your css (something like grid.getView().getScroller()).