I'm trying to change the color/style of a table scrollbar. Everything I have tried changing in the CSS has failed. Below is what I tried to add but it seems to be ignored when the page is rendered. Any suggestions on how to accomplish this?
SyntaxEditor Code Snippet
table::-webkit-scrollbar{ background-color: green; } table::-webkit-scrollbar-thumb{ background-color: red; } table::-webkit-scrollbar-thumb:window-inactive{ background-color: blue; }
Josh Herron wrote:
Hi,
You can use this. This is what I use to stylize the scroll bars of my applications.
Apply to the CSS of the screens you want to use.
.scrollList{ height: 330px; overflow-x: hidden; overflow-y: scroll; } .scrollStyle::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); border-radius: 10px; background-color: #FFF; } .scrollStyle\:\:-webkit-scrollbar{ width: 6px; background-color: #d2dae7; border-radius: 0px 6px 0px 0px; } .scrollStyle::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: rgba(0,0,0,0.3); }
With this css, in my list, the scroll bar looks like this:
But with that css in hand, you can play around with the design.
I hope to help you.
Hi Bernardo,I am trying the same CSS but in reactive application. Also, instead px container's height is in % in my application. Still the CSS doesn't works for me.Can you share some insights on this if possible?Regards,Nikhil Purohit
Is the table the one it's scrolling or it's the wapper container that is scrolling? i'm guessing that's why your changes dont have any effect
I was able to get the scrollbar to appear by setting the style on the wrapper to "width 100%" and then on the table record element I added the style below. It seems that the table element has the scroll associated with it rather than the wrapper.
"overflow-x: auto; display:block;"
Nevermind I figured it out... I didn't realize IE11 had different CSS controls for scrollbars. It renders fine in Chrome and I need to work on my CSS for IE now.
That CSS will not work in IE11 though correct? My understanding is that I will need to use this type of logic for that browser.
table { scrollbar-base-color: #59abe3; scrollbar-face-color: #a4d7f9; scrollbar-3dlight-color: #7fc1ef; scrollbar-highlight-color: #a4d7f9; scrollbar-track-color: #e7f4f9; scrollbar-arrow-color: black; scrollbar-shadow-color: black; scrollbar-dark-shadow-color: black;}