Decorated scrollbars across browsers

5 posts, 0 answers
  1. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 27 Dec 2012 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 28 Dec 2012 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 02 Jan 2013 Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 Jan 2013 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 07 Jan 2013 Link to this post

    thanks, it seems to be the right one indeed.

    Martin
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017