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





Comments

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

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

    ReplyDelete
    Replies
    1. I haven't tested it but i will have a look

      Delete
  3. 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?

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

      Delete

Post a Comment