Results 1 to 7 of 7

Thread: Want to Change Scroll bar Look

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    307
    Answers
    1
    Vote Rating
    2
      0  

    Question 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
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    714
    Answers
    45
    Vote Rating
    235
      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
    307
    Answers
    1
    Vote Rating
    2
      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
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    714
    Answers
    45
    Vote Rating
    235
      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
    307
    Answers
    1
    Vote Rating
    2
      0  

    Exclamation 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
    307
    Answers
    1
    Vote Rating
    2
      0  

    Exclamation

    Can we have any response ????

  7. #7
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    262
    Answers
    6
    Vote Rating
    79
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •