Horizontal scroll bar on top of Interactive Grid in Oracle APEX

The default Interactive Grid in Oracle APEX includes a horizontal scroll bar at the bottom. While this is useful, it requires users to scroll down to the bottom of the grid to move horizontally, which can be inconvenient, especially with large datasets. Adding a horizontal scroll bar at the top of the grid can significantly improve usability.

Implementing the Custom CSS

To add a horizontal scroll bar at the top of the Interactive Grid, we need to apply custom CSS. Here’s a quick and easy way to do it:

Step 1: Set your grid's ID

First, you need to set the Static ID of your Interactive Grid. This can be set in the Advanced section of the grid attributes in APEX.

Step 2: Add the Custom CSS

Once you have your Grid ID, you need to add the following CSS code to your page. You can add this CSS in the page's "CSS" section under "Page Attributes" or in a separate CSS file included in your application.

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

Replace YOUR_GRID_ID_HERE with the actual Static ID of your Interactive Grid. This CSS code targets the header of the grid and makes the horizontal scroll bar always visible.

Understanding the CSS Code

• #YOUR_GRID_ID_HERE: This is the selector that targets your specific Interactive Grid based on its Static ID.
• .a-GV-w-hdr: This class is part of the Oracle APEX framework, specifically for the grid header.
• overflow-x: auto !important;: This property and value combination ensures that a horizontal scroll bar appears if the content overflows the width of the header.