Show an additional scrollbar on top (Interactive Grid Cheats #2)

As we said in the previous blog, we want to share a few little tips and tricks with you that help us again and again and appear useful in developments.

Let's get to the second tip :-) 

#2 Show an additional scrollbar on top

It happens from time to time that a grid contains a lot of columns and therefore becomes wider than the screen. If the grid contains a lot of records, it can be difficult to see the columns that are at the right end of the grid. So you have to scroll vertically to the bottom of the grid before you can scroll the horizontal bar to the right. Then scroll up again vertically to get to the desired position. We believe that this can be annoying for every user. A possible solution is to insert an additional scroll bar above the data records. Again, only one command is enough for us. This time we add a CSS class to integrate the scrollbar.

But first of all we assign a "CSS-Class" to the grid, so that we can select it via CSS. In our example we name it "my_grid".

Then we enter the following code in the CSS inline code editor of the page:

.my_grid .a-GV-w-hdr{

    overflow-x: auto !important;

}

That´s it! An additional horizontal scrollbar was added :-)

So easily, or?

And here is the demo app.

We hope the tips and tricks will help you. If you have questions or suggestions, please leave us a comment ;-)