[Custom Scrollbar] Scrollbar appears in the navigation control

Forge Component
(6)
Published on 2016-10-10 by Miguel Amado
6 votes
Published on 2016-10-10 by Miguel Amado

I have checked into this widget to add a more stylish scrollbar to our application.   It works as intended, but I am finding that when I add this to a table that has pagination controls at the bottom the scrollbar always appears in the middle of that pagination section.  I have tried adding padding to the bottom of the table record element and adding padding to the top of the pagination navigation container... it does add white space but the bar moves with the navigation container so I can't correct the issue.   Any ideas?

Hello,
For scrollbar design in my applications, I use the following css:

.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.

Apply to the CSS of the screens you want to use.

I hope to help you.


Solution

Hello Josh,


Have you tried applying the scroll bar component to different containers. 

Attached you have quick test where I apply the component to the list and the pagination, and apply it also only to the list and it's working.


I'm using the Top Menu Theme

Solution

Thanks to you both.   I was able to get a better looking scrollbar using either solution.