How to :: add scroll bar!

Warning

Disclaimer : This only works on webkit browsers (Safari and Chrome).

Key words: scrollbar, scroll-bar, scroll bar, webkit-scrollbar

What’s that

If you need to make the scroll bars visible in the application (client doesn’t have mouse wheel, our touch drag capabilities), you can copy paste the following css in the specific stylesheet of your project.

This should add the scroll bars on charts, kpinavigator and dashboards.

Configuration

.generic-chart::-webkit-scrollbar,
tc-new-chart::-webkit-scrollbar,
kpinavigator::-webkit-scrollbar,
dashboard-report::-webkit-scrollbar {
    -webkit-appearance: none !important;
    display: block;
    width: 10px;
}

.generic-chart::-webkit-scrollbar-thumb,
tc-new-chart::-webkit-scrollbar-thumb,
kpinavigator::-webkit-scrollbar-thumb,
dashboard-report::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(0,0,0,.5);
}

.generic-chart::-webkit-scrollbar-track,
tc-new-chart::-webkit-scrollbar-track,
kpinavigator::-webkit-scrollbar-track,
dashboard-report::-webkit-scrollbar-track {
    border-radius: 8px;
}