Decorated scrollbars across browsers

[Martin Roussel]

Hi, I was testing the RadFormDecorator in different web browsers and noticed some differences, especially with the scrollbars in RadComboBoxes and RadSplitters. Im using Q3 2012 with WebBlue skin.

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" Skin="WebBlue" DecoratedControls="All" EnableRoundedCorners="false"  />

In IE8 and IE9, the scrollers are like I want. Decorated with a darkish blue (ie8.png).

In Chrome (23.0.1271.97 m) and Safari 5.1.7 (PC), scrollers are decorated but differently. The filling color is alot lighter and is more grey than blue (chrome-safari.png). The color actually makes it hard to see when using grey background

In FF (17.0.1) and Opera 12.11, scrollers are not decorated at all. Ive read somewhere that FF wont allow scroll decoration and probably it's the same for Opera.

What's bugging the most is the style difference when decoration is allowed. Is this normal and is there a CSS workaround for Chrome/Safari to make it look like the ones in IE?

TIA


Martin

[Danail Vasilev]

Hello Martin,

According to the W3C standards, scrollbars are not part of the website but the browser. Therefore they are not supposed to be decorated, although some browsers (e.g. IE9 and WebKit) are an exception.

The difference of the styling of the scrollbars (we use the same color for the track for both browsers - #c7d0d9 for WebBlue skin ) between IE9 and WebKit (Chrome and Safari) is due to the difference in the styling attributes these browsers are applying. Therefore the observed behaviour is not a bug but a browser behaviour. You can, however, overwrite the WebKit's CSS classes and apply the desired color of the scrollbar, following the approach below:

.RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar,

 .RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar-thumb:vertical,

 .RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar-thumb:horizontal,

 .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar, .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar-thumb:vertical,

 .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar-thumb:horizontal form::-webkit-scrollbar,

 .RadForm_WebBlue.rfdScrollBars form::-webkit-scrollbar-thumb:vertical,

 .RadForm_WebBlue.rfdScrollBars form::-webkit-scrollbar-thumb:horizontal

{

    background-color: red !important; /* choose your color */


}

Kind regards,
Danail Vasilev
the Telerik team

[Martin Roussel]

Danail,

that seems to do the trick for webkit browsers except for horizontal scroller of RadComboBoxes. For other controls, like RadSplitter, it is good. Seems like there a CSS entry we need to add to apply the same rule but cant see which one we miss.

TIA

Martin

[Danail Vasilev]

Hello Martin,

The following CSS should do the work:

<style>
    .RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar,
    .RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar-thumb:vertical,
    .RadForm_WebBlue.rfdScrollBars body::-webkit-scrollbar-thumb:horizontal,
    .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar,
    .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar-thumb:vertical,
    .RadForm_WebBlue.rfdScrollBars div::-webkit-scrollbar-thumb:horizontal,
    .RadForm_WebBlue.rfdScrollBars form::-webkit-scrollbar-thumb:vertical,
    .RadForm_WebBlue.rfdScrollBars form::-webkit-scrollbar-thumb:horizontal
    {
        background-color: red !important; /* choose your color */
    }
</style>

I hope that helps.

Regards,
Danail Vasilev
the Telerik team

[Martin Roussel]

thanks, it seems to be the right one indeed.

Martin