PDA

View Full Version : Want to Change Scroll bar Look



maitreya.karandikar
26 Apr 2013, 6:28 AM
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 :-
43380
M using Extjs.4.1.3 css.

suzuki1100nz
26 Apr 2013, 4:31 PM
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/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

good luck

maitreya.karandikar
30 Apr 2013, 2:39 AM
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 :-
43436

suzuki1100nz
30 Apr 2013, 11:42 AM
IE has its own scroll styles.

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

maitreya.karandikar
24 May 2013, 3:06 AM
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 :-
43973


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

maitreya.karandikar
26 May 2013, 9:05 AM
Can we have any response ????:">

Misiu
3 Dec 2013, 2:04 AM
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-touch-2.3.1/built-examples/kitchensink/index.html#demo/basicdataview, but this could be an option so that everyone could turn those scrollbars on/off.