Modal Dialog + Interactive Grid = Problems?

Recently, I needed to create an Interactive Grid with more than 500 records inside a Modal Dialog. It looked like a simple task, but it was not so simple after all. If you want to know what problems and challenges I faced, and whether I managed to solve them, you can read this article. It will take about 2 minutes and may save you some time that you would otherwise spend looking for a solution.

After creating the Interactive Grid, the first thing I noticed (which was hard to miss) was that with the default Modal Window settings, records in the grid stop being displayed after row 56 (randomly?).

The default pagination setting for my Interactive Grid was Type = Scroll, so I changed it to Type = Page.
Things became even more interesting, because now the Interactive Grid displayed only two rows.

So, in the Attributes of my Interactive Grid, in the Heading section, I set Fixed to = Region and Fixed Report Height = 500 pixels. What do these options mean exactly?

Fixed to: Specify whether you would like to fix the report's column headers to the top of the Page or top of the Region, so that the column headers remain visible as the user vertically scrolls the report.

None: Report header is not fixed.

Region: Fixes the report header to the top of the current region. As the user vertically scrolls within the region, the report header will remain fixed at the top of the region. Region level fixed headings could be useful for a page containing multiple regions, for example a dashboard page.

Page: Fixes the report header to the top of the page. As the user vertically scrolls the page, the report header will remain fixed at the top of the page. Page level fixed headings are useful for when the report is the main content on the page. This setting is not supported when the region is in a dialog.

With these settings selected, the Interactive Grid displays correctly (both with Page and Scroll pagination).

But of course, there is another option. We can set Pagination = Page, and then, from the grid settings in the application (Actions → Format → Rows per Page → 1000), display up to 1000 records. This way we keep pagination, and if the Interactive Grid has fewer than 1000 records, we get the same effect as with Scroll pagination.

One more thing. At the bottom of the Modal Window, I decided to add two buttons: Save and Cancel.
I placed both of them in Static Content using the Button Container template, and here another surprise appeared. It turned out that the pagination and the buttons were rendered in the same place, which created a rather unacceptable visual effect.

It looks like APEX tries to stick the pagination to the bottom of the browser window, but still inside the Modal Dialog. This can be fixed with a few lines of CSS:

.a-GV-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1 !important;
    display: flex !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

.a-GV-vc {
    margin-bottom: 0 !important;
}

.a-GV {
    display: flex;
    flex-direction: column;
}

Modal Dialog and Interactive Grid. It was supposed to be simple, but it was not. However, most of the problems were solved. I hope the notes in this article will be helpful and save you some of your valuable time.