1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    296
    Vote Rating
    2
    maitreya.karandikar is on a distinguished road

      0  

    Question Unanswered: Want to Change Scroll bar Look

    Unanswered: Want to Change Scroll bar Look


    Hi,
    I am using grid of Extjs. I want to change the scroll bar of the grid using css or any property.
    Can some one help me for the same .

    Please find below image :-
    geide_scrollbar.jpg
    M using Extjs.4.1.3 css.

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    450
    Vote Rating
    66
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Hi,

    Scrollbar styling is browser specific, its not until recently you could even apply styles.
    For webkit browsers look here - https://www.webkit.org/blog/363/styling-scrollbars/

    Have a look here for the rest - http://webdesign.tutsplus.com/tutori...our-ui-design/

    good luck

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    296
    Vote Rating
    2
    maitreya.karandikar is on a distinguished road

      0  

    Default


    Thanks,

    I found solution , which is working fine in chrome and safari only , code as below :-
    ================================================
    css code :-

    ::-webkit-scrollbar {
    width: 12px; }


    ::-webkit-scrollbar-thumb {
    background-color: #0088bf; }


    ::-webkit-scrollbar-track {
    background-color: #CDCDCD; }
    =================================================

    It work fine in Chrome and safari but not appearing fine in IE. It showing as below :-
    scroll_extra_box.png

  4. #4
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    450
    Vote Rating
    66
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    IE has its own scroll styles.

    Have a look at http://msdn.microsoft.com/en-nz/libr...(v=vs.85).aspx

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    296
    Vote Rating
    2
    maitreya.karandikar is on a distinguished road

      0  

    Exclamation removed the top section and Thickness must be less

    removed the top section and Thickness must be less


    Hi,

    I put below code in index.html as :-
    ===================================================
    <style type="text/css">
    body
    {
    scrollbar-face-color:#0088bf;
    scrollbar-track-color:#CDCDCD;
    scrollbar-3dlight-color:#0088bf;
    scrollbar-darkshadow-color:#0088bf;
    scrollbar-shadow-color:#0088bf;
    scrollbar-highlight-color:#0088bf;
    scrollbar-arrow-color: #0088bf;
    position: relative;
    cursor: pointer;
    outline-width:thick;

    }
    </style>
    ============================================================
    it is appearing as below in IE :-
    scroll_extra_box.png


    Please provide me the code which work fine in IE and chrome as well.
    advanced in thanks...!!!

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    296
    Vote Rating
    2
    maitreya.karandikar is on a distinguished road

      0  

    Exclamation


    Can we have any response ????

  7. #7
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    240
    Vote Rating
    58
    Answers
    6
    Misiu is a jewel in the rough Misiu is a jewel in the rough Misiu is a jewel in the rough

      0  

    Default


    It would be nice to have this feature inside Ext by default. This way we could have some space, because this scrollbar don't need so much extra space to be added to grid.
    Ideal solution would look as in Touch: http://cdn.sencha.io/touch/sencha-to.../basicdataview, but this could be an option so that everyone could turn those scrollbars on/off.

Thread Participants: 2