Oracle APEX - Interactive Report - Scrollbars on Top

I have been came across an interested requirement ( which is very valid ) to add scrollbars on the top of the regions! I have seen many times when you want to scroll right to see further data of first few records, you will scroll vertically to get to the horizontal scroll-bars. And then you do horizontal scroll and then vertical scroll to go top of the region. Aren't you ??? :-)

So, to ease the user interaction with IR - we should have a scrolling option somewhere on the top of the region ? - For Sure



So, how can we add scrollbars on top of the report for an Interactive Report ?

By default IR Fix the column headers to the page. This setting gives us an opportunity to add scroll-bars just below the column header as well.

Just by adding following CSS line you should get a beautiful scroll-bars just below you header and it works really great as well.

#MYIR .t-fht-thead{
  overflow: auto !important;
}

I am also trying to find a way to add same functionality for Classic Report and I will let you all know once I figure that out.


Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com

Comments

  1. Hi, in which section I must insert the code you provided?

    ReplyDelete
    Replies
    1. Hello, you should first give static ID ("MYIR") to your IR region and insert the css code in page header Inline CSS section or in theme roller. You may ignore the Static ID if you want all your IR on that page to consider with header scrolling. If you want this to implement across your application, you should add this to theme-roller without ID selector.

      Delete
  2. Hey, is it also possible for the interactive grid?

    ReplyDelete
    Replies
    1. Yes, it is possible using following CSS. I have also updated the demo link with IG example.

      #MYIG .a-GV-w-hdr{
      overflow: auto !important;
      }

      Delete
    2. The Scrollbars are not visible at the top in IG. Can you please check.

      Delete
  3. Thanks
    Can you suggest how horizontal scrollbars that appear at the bottom of reports be made floating?

    ReplyDelete
  4. Hello Jaydip,

    By this CSS scroll bar has added at top, But when we scroll bit down and then use the top scroll bar to move horizontally, It moves data only not the heading, Please help us.

    THanks

    ReplyDelete
    Replies
    1. Hi
      Yes, I noticed the same. If we scroll down and then try to slide the scroll bar, it removes the page header. Can you pleas assist?

      Delete
    2. OK, Please re-create issue on apex.oracle.com and send details, please.

      Delete
  5. Many Thanks for this code. Our users have been looking for this feature for a while.

    ReplyDelete
  6. Is it possible to make the top header sticky when i scroll down my report?

    ReplyDelete
  7. Can i make the scrollbar sticky in any way? So that when i go down it follows

    ReplyDelete
    Replies
    1. Please refer https://apex.oracle.com/pls/apex/f?p=apexbyg:sticky_region on how to make region sticky.

      Delete
  8. Hi, did you also find out how to add this scrollbar at top for the classic report?

    ReplyDelete

Post a Comment

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

How to create your own customized nested report regions using jQuery

Make your RESTful APIs Secured with OAuth2 - Basic, Simple and Easy Steps