primefaces - How to change the DataTable scrollbar appearance? -


i tried find firebug proper css class responsible datatable scrollbar appearance, couldn't find reasonable css class. table scrollbar browser dependent - looks different in every browser. how can implement 1 scrollbar appearance every browser?

you can achieve css, using webkit. primefaces has modifications done normal scrollbar in there css.

the scrollbar webkit are:

::-webkit-scrollbar              { /* 1 */ } ::-webkit-scrollbar-button       { /* 2 */ } ::-webkit-scrollbar-track        { /* 3 */ } ::-webkit-scrollbar-track-piece  { /* 4 */ } ::-webkit-scrollbar-thumb        { /* 5 */ } ::-webkit-scrollbar-corner       { /* 6 */ } ::-webkit-resizer                { /* 7 */ } 

some of these implemented primefaces, !important needed.

here's quick example based on an article.

 /* !important needed */  ::-webkit-scrollbar {     width: 12px !important;  }   /* track */ ::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;     -webkit-border-radius: 10px !important;    border-radius: 10px !important;  }   /* handle */  ::-webkit-scrollbar-thumb {    -webkit-border-radius: 10px !important;    border-radius: 10px !important;    background: rgba(255,0,0,0.8) !important;     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;   }  ::-webkit-scrollbar-thumb:window-inactive {    background: rgba(255,0,0,0.4) !important;   } 

here's outcome:

scrollbar

a small working example can found on github , online demo.

hope helps.


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -