Thursday, July 30, 2020

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-xauto !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 ;-)

Labels: , ,


At July 31, 2020 at 7:57 AM , Anonymous Anonymous said...

That's cool. One suggestion (don't mind) keep Other blog links in newer blog page also in Demo application so people can visit more and more of yours blog page.

At July 31, 2020 at 3:34 PM , Blogger Timo said...

Done :) Thank´s for the hint!

At November 27, 2020 at 11:53 AM , Blogger Unknown said...

What if I use control break on my IE? The scrollbar disappear

At November 29, 2020 at 1:24 PM , Blogger Timo said...

I haven't tested it but i will have a look

At August 18, 2021 at 4:17 AM , Blogger FuRbY said...

Hi Timo, I see that the scrollbar does NOT disappear when changing to control break on your app, but mine DOES!
I'm using an interactive report in APEX 20.2, standard template without any extra customizations
Did you made another change in the class to make it work?

At August 19, 2021 at 9:12 AM , Blogger Timo said...

Hello Furby,
the difference is the interactive report instead of an interactive grid. The control breaks work well with an interactive grid :-)

At November 26, 2021 at 4:08 AM , Blogger nobita4eyes said...

Thank Timo.

At October 5, 2022 at 6:46 PM , Anonymous Anonymous said...

My Gosh. That's exactly what I need for my IG, however, that didn't work for me. The results continues to squish all the columns to fit onto the screen.

At October 5, 2022 at 7:59 PM , Anonymous Anonymous said...

Sorry - Never Mind. I had to resize the column widths when I displayed the data. Making a column wider, then displayed the top horizontal scroll bar.


Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to Post Comments [Atom]

<< Home