Hi,
thanks for your post, and sorry for the trouble.
While there is some CSS code on the web to style scroll bars (I don’t have it available right now), there’s no real guarantee that it works across all browsers and on all computers. In addition, you might make using the scroll bar more difficult for users of assistive technology, so that I don’t really recommend it.
Regards,
Tobias
Let me explain the dilemma. This table is being used by a small resort who tend to have users who are not very computer literate. The grid is too big to display in a single pane unless I reduce the table size greatly and then it is hard to read. The users are having trouble finding the scroll bar since it’s gray color tends to blend in with the table itself. So, the resort is getting many calls saying they can’t see all the cabins.
Any other ides how I might be able to highlight the scroll bar?
Hi,
it looks like this is actually easier than I thought. Please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.dataTables_scrollBody::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.dataTables_scrollBody::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
But as I said it might not work in all browsers. I tested in Chrome where it works.
Regards,
Tobias
Outstanding support Tobias!!!!!!!
I can’t thank you enough.
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
