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:
a small working example can found on github , online demo.
hope helps.
Comments
Post a Comment