Home > ApEx > ApEx: Using Scrollbars in a Region

ApEx: Using Scrollbars in a Region

ScrollbarsIf you’ve got a report with a lot of rows to display you’ve standardly got a couple of options:

1) Paginate

2) Show all the rows and let the user scroll down the page.

Here’s a third option: Get the region which contains the report itself to scroll. You can see a demo here:


This is achieved by setting the Region Header to:

<div style="overflow: auto; height: 450px;">

And the Region footer to:


Just change the value of 450px as desired and that’s it.

Note: One problem with this is that if the rows of your report don’t fill the full 450 pixels then you end up with white space at the end of the report. You can use max-height instead of height to get round this problem. Unfortunately, however, max-height does not seem to work with Internet Explorer (6.0 or 7.0) but does work with Firefox. Since the production environments where Firefox can be guaranteed to be the sole browser used are few and far between, the upshot is that we are generally forced to use height as opposed to max-height.

Acknowledgments: Thanks to Brian Barenbaum for coming up with the idea of using “max-height” instead of just “height” in the DIV’s style tag (See comment 5 of this blog entry).

Categories: ApEx
  1. NS
    September 1, 2015 at 10:00 pm

    I implemented this while go, but now after upgrading to apex 5.0.1 once I got this scroll bar page.. my tab clicking become inactive… Kindly help.

  2. Praveen Bangera
    October 8, 2013 at 4:28 pm

    For me its not working…I have IE9…I get a scorll bar , but it does not show all the records.. any help.?

  3. sadnesh
    October 12, 2012 at 6:49 am

    how to add scrollbar to the top of the region?

  4. Tanay
    February 27, 2012 at 10:34 pm

    nice.. it helped my report as well!!

  5. Robin Browne
    August 3, 2007 at 8:02 am

    This is a great feature, but typically I need it to work in IE; if I implement it with just width or height (not max-height/width) I potentially get lots of whitespace, as the width and height of the tables will be different lengths.

    Is there any solution to this other than changing browser?

  6. August 1, 2007 at 1:58 pm

    max-height does not appear to be supported in I.E 6 or I.E 7.

    It does however work perfectly in the Fox and Opera.


  7. Brian Barenbaum
    July 12, 2007 at 4:01 pm

    Great, and very useful! One thing that I found though, I find it much more useful to use max-height as opposed to height. That way, if you only have a few records in your report you won’t have a region with a whole lot of empty space on the bottom.

  8. June 23, 2007 at 10:08 pm

    Andy. Nice tip. If you wanted to create a report template, all you need to so is place the div before the table is opened in the “Before Rows” section.

    I have a report template that “freezes” the headings and will put it on my blog soon but it only works in IE so I shall look into re building the templte with you solution implemeted. Shall let you know when its done.


    P.S hope your project is going well!

  9. June 21, 2007 at 7:06 am

    Well Done! Very usefull….

  10. Gary
    June 14, 2007 at 10:41 pm

    Aaarg. I could have done with this a few weeks back.
    Thanks, I’ve filed it away for next time

  11. June 14, 2007 at 6:27 pm

    Nice tip!


  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: