Skip to Main Content
  • Questions

  • Interactive Report pagination automatically stick/unstick to the bottom

Breadcrumb

Question and Answer

Connor McDonald

Thanks for the question, Andy.

Asked: June 23, 2020 - 8:51 pm UTC

Last updated: July 01, 2020 - 1:58 am UTC

Version: 20.1

Viewed 1000+ times

You Asked

Hi,

Is there any way to make the interactive report pagination automatically stick and unstick to bottom of page like interactive grid does? I tried the following but it didn't work:

$('.a-IRR-paginationWrap--bottom').stickyWidget({ toggleWidth: true, stickToBottom: true });


I created the above JavaScript code in a After-Refresh (interactive report region) dynamic action.

The following is my example in apex.oracle.com:
https://apex.oracle.com/pls/apex/pdsprd/r/ir-floating-pagination-test/home

Username and password are displayed in login page.

Thank you.

and Connor said...

I spoke to the APEX people. Their response below. Hope this helps.


It is expected that interactive grid has a sticky footer and interactive report does not. This is just one of the many differences between the two region types. I don't know of a specific technical reason why IR doesn't support a sticky footer. I also have not tried to create a workaround to make IR footer stick.

I see the sample app has some code calling stickwidget. That is the correct general idea since it is the stickywidget that handles the sticky footer for IG. It would take some time to figure out how to make it work if it is at all possible.

Our preferred method of making sure a region is fully visible so that its footer and horizontal scroll bar if any is visible is to size it to exactly fit the screen. This works for both IG and IR and others. Start with setting heading fixed to region and give the region a reasonable height. (this removes any sticky widget behavior) Then on page load and anytime the window resizes calculate a new height for the region so that it exactly fits the window size (subtract off any fixed sized regions). There is an example of this in the IG Cookbook page 23 Wide Report.

Rating

  (2 ratings)

Is this answer out of date? If it is, please let us know via a Comment

Comments

A reader, June 30, 2020 - 4:44 am UTC

Thank you very much for the information.
Connor McDonald
July 01, 2020 - 1:58 am UTC

glad we could help

Martin ROSE, July 20, 2020 - 8:57 am UTC

This may not be spot on, as I obviously cannot run your code to try it out (and I am also stuck on a very early version of Apex where it does work), but first you need to give the region in question a static ID (this is done in the region definition).

Then, in Page Rendering --> CSS.
#<static-ID> .uReportDownloadLinks  {position:sticky; bottom:-8px; background-color:#cccccc; padding-top:8px; padding-bottom:8px; z-index:999};

You may have to replace .uReportDownloadLinks with what is appropriate for your template. Use Chrome's inspect ability to help you.
If you don't know CSS, suggest you get learning it. Google "css position sticky" for more info.

But it's the 
position:sticky;  bottom:-8px
bit that's the really important part.
more

Connor and Chris don't just spend all day on AskTOM. You can also catch regular content via Connor's blog and Chris's blog. Or if video is more your thing, check out Connor's channel and Chris's channel from their Youtube channels. And of course, keep up to date with AskTOM via the official twitter account.

More to Explore

APEX

Keep your APEX skills fresh by attending their regular Office Hours sessions.