Learn how to add a top horizontal scroll bar in Oracle APEX Interactive Grid reports

Whenever a UI application displays a large result set with many rows and columns, navigation can become cumbersome. Users often need to scroll vertically to view records and then scroll back to the top to access the horizontal scroll bar in order to view additional columns. This negatively impacts usability and overall user experience.

We encountered a similar challenge with an Oracle APEX Interactive Grid report that contained a high number of columns. Navigating across columns while reviewing rows became difficult and inefficient for users.

To address this issue and enhance the visual and navigation experience, we implemented a horizontal scroll bar at the top of the Interactive Grid. This allows users to navigate columns easily without scrolling back to the top of the report repeatedly.

This article outlines the step-by-step approach to adding a top horizontal scroll bar to an Interactive Grid in Oracle APEX.

Step 1: Add Custom CSS at the Page Level

1. Navigate to the required APEX page containing the Interactive Grid.

2. In the Page Designer, click on Page (under Rendering).

3. On the right-hand attributes pane, locate the CSS section.

4. In the Inline CSS editor, add the required custom CSS code (provided in the next step).

.apex-igrid .a-GV-w-hdr {

overflow-x: auto !important; /* Enable horizontal scrolling in the grid header */

}

This CSS will synchronize the top scroll bar with the Interactive Grid, enabling smooth horizontal navigation across columns.

Step 2: Update Interactive Grid Pagination Settings

1. Select the Interactive Grid region on the page.

2. In the right-hand pane, click on Attributes.

3. Navigate to the Pagination section.

4. Change the Pagination Type to Page.

This setting ensures controlled data rendering and helps maintain smooth scrolling behavior when using a top horizontal scroll bar.

Step 3: Assign the Required CSS Class to the Interactive Grid Region

1. Select the Interactive Grid region in Page Designer.

2. Click on Region.

3. In the right-hand properties pane, locate the CSS Classes field.

4. Add or select the following CSS class:

            apex-igrid