Horizontal Scrollbar on Interactive Reports

Large interactive reports in Oracle APEX can sometimes make users scroll to the end of the page before accessing the default scrollbar, which can be a hassle, especially when dealing with wide tables. A possible approach is to add a custom horizontal scrollbar directly within the report area. This way, users can scroll conveniently without disrupting the page layout.

In this blog, I’ll show you how to use a CSS class to add a horizontal scrollbar specifically in the header area of Interactive Reports, making it easier for users to navigate wide reports.

Step 1: Set the Heading to "Fixed to Page"

Before adding the CSS, make sure your report’s heading is set to be fixed to the page. This setting ensures that the header stays in place as you scroll horizontally, providing a smoother experience for users.

1. Go to the Report’s Properties:

• In Oracle APEX, open the Page Designer for your report.

• Select your report region in the layout tree.

2. Set “Fixed To” to Page:

• In the Heading section, find the Fixed To option.

• Set it to Page (as shown in the screenshot) to ensure the header remains fixed at the top as users scroll horizontally.

This setting will make the header responsive to your custom CSS and prevent it from shifting out of view when scrolling.

Step 2: Finding the Header Element

To add a horizontal scrollbar specifically to the report header, we need to identify the HTML element that wraps the header. Here’s how:

1. Open Developer Tools:

   • In your web browser, right-click on your report and select Inspect (or press F12 on your keyboard, or Cmd + Option + I on a Mac) to open the developer tools.

2. Locate the Table Element:

   • In the Elements tab, use the inspect tool (a small cursor icon in the developer tools) to hover over your report.

   • Click on the main table element within the report. Typically, this will have a class-like .a-IRR-table or similar, representing the main table structure.

3. Identify the Header Wrapper:

   • Once you’ve selected the table, look up a few levels in the HTML hierarchy. You’re searching for a <div> element just above the table that includes classes such as .t-fht-thead or .js-stickyTableHeader.

   • This <div> is the header wrapper, which Oracle APEX uses to keep the header fixed during vertical scrolling.

   • For example, you may see something like this: <div id="stickyTableHeader_1" class="t-fht-thead js-stickyTableHeader js-stickyWidget-toggle is-stuck">. This element appears right before the <table> and controls the fixed header area.

4. Take Note of the Class or ID:

   • Make a note of the class of this <div> element. You’ll use this identifier to apply CSS in the next step.

Step 3: Apply the CSS for Horizontal Scrolling

Now that you’ve identified the correct header element, it’s time to apply the CSS to make it scroll horizontally. Here’s how:

1. Add a Static ID to the report

2. Add the CSS:

   • Go to the Inline CSS section in Oracle APEX, or add this CSS to your application’s shared styles if you want it to apply across multiple pages.

3. Use the Class or ID of the Header Wrapper:

   • Use the static ID added to the report along with the CSS class you noted from Step 2.

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

Explanation of the CSS

• overflow: auto !important; – This property enables scrolling for overflow content, and the !important rule ensures it overrides any existing styles. This will create a horizontal scrollbar within the report header area when the content exceeds the visible width.

• Report Selectors – Each ID (#reportStaticId) targets a specific report on the page. Adjust these IDs to match the IDs of the reports in your application. This approach lets you add horizontal scrolling to specific reports without affecting others.

Result

.

Adding a horizontal scrollbar to the header area of your Oracle APEX reports can greatly enhance user experience, especially for wide datasets. By following these steps, you can easily identify the header element, fix the header to the page, and apply custom CSS to enable smooth scrolling.

Important Note:

This method relies on the current APEX HTML markup structure. If Oracle APEX’s HTML structure is updated in future releases, the CSS and approach outlined here may need to be adjusted accordingly.