10 Replies Latest reply on Sep 19, 2013 10:50 AM by Waggers

    Horizontal scrollbar in interactive report


      I am using Two Level Tabs - Left Sidebar (fixed-width / DIV based) page template in application, Navigation region with vertical sidebar list for report list, theme Sunrise (5). The problem is when IRs have many columns and they don't fit horizontally, there is no hor. scrollbar:

      http://apex.oracle.com/pls/apex/f?p=35137:1 (user/pass: demo/demo)

      To fix it, I have added regional attribute: style= "overflow-x: auto; display: block;"
      to page two and put IR into parent HTML region of template Reports Region, IR itself is type Region without Buttons and Titles:

      http://apex.oracle.com/pls/apex/f?p=35137:2 (user/pass: demo/demo)

      Everything looks fine, but I found a problem, when you select IRs columns heading to sort, hide, filter etc. in cases when column is in very right side, second horizontal scrollbar appears on the browser window level and heading window is in far right side of browser. For example selecting Product id header works fine, but selecting More Col6 is buggy.

      Any ideas how to fix it?

      Thank you in advance.
        • 1. Re: Horizontal scrollbar in interactive report
          I have found that headings is displayed using "apexir_rollover" div.
          Maybe it is possible to fix its appearing position?
          • 2. Re: Horizontal scrollbar in interactive report
            G. Kolev
            I have the same problem - no scrollbars on report pages. Actually, when I refresh the page with Ctrl+F5 1-2-3-4... times (every time different), the scrollbar appears... And after next refresh - it hides..

            Very, very strange - may be it's a new feature on Apex 4 - random horizontal scrollbar...

            Can anyone help us?
            • 3. Re: Horizontal scrollbar in interactive report

              I fixed problem by creating new template - Two Level Tabs - Left Sidebar (fixed-width / table-based) and using to all interactive reports. It is sad that by default APEX does not have a theme for left table-based sidebar, there is only right sidebar table-based (actually there are some themes with template - "Two Level Tabs with Sidebar" [themes: 10, 13, 14, 16, 18, 19 20] which works with left sidebar and shows hor. scrollbar).
              To create this template simply copy existing template with table-based right sidebar, example: "Two Level Tabs - Right Sidebar (optional / table-based)", name it as with left sidebar and change columns places in body > div "body" section. Final code of my template body:
              <div id="body">
              <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
              <td class="tbl-sidebar" style="padding: 0 10px 0 0">#REGION_POSITION_02#</td>
              <td class="tbl-main" width="100%">#REGION_POSITION_03##BOX_BODY#</td>

              I used hint from this thread: Re: APEX 4.0.2 : in my pages not displaying horizontal scroll bar

              You can also change two-col-sb-left style of Two Level Tabs - Left Sidebar (fixed-width / DIV based) template adding this code in page header:
              <style type="text/css">
              #two-col-sb-left {overflow: visible !important;}     

              But it did not worked for me when there is reports region inside html region.

              • 4. Re: Horizontal scrollbar in interactive report
                Wouter Breeuwsma

                I fixed this problem by changing the style in theme_4_0.css for apexir_DATA_PANEL. I added overflow: scroll; which produces a scroll bar when the report is too wide for the page.
                #apexir_DATA_PANEL {
                    margin-bottom: 10px;
                    overflow: scroll;
                Regards, Wouter

                Edited by: Wouter Breeuwsma on 17-jan-2012 14:30

                Later on I changed it to overflow: auto, otherwise the scroll bar shows up all the time, even when it is not necessary.
                • 5. Re: Horizontal scrollbar in interactive report
                  I had same problem, solved it by adding style=width:1100px;height:100%;overflow: auto; for "region attributes" under Attributes section of "Region Definition" for that report. What I observed is specifying width and height is important for overflow to work. Hope it will help.

                  Edited by: user8881611 on Feb 14, 2012 10:25 AM
                  • 6. Re: Horizontal scrollbar in interactive report
                    When you guys add the horizontal scroll bar does your "sort filter drop down menu..." pops up oddly to the right when you select a column header that's very far to the right?

                    Only happens in Table with lots of columns.

                    Browser IE8

                    Picture example below...

                    Edited by: PandaOracle on Feb 14, 2012 12:41 PM
                    • 7. Re: Horizontal scrollbar in interactive report
                      It happens if the width specified in Region Attributes is less than screen width. IT happens even in other browsers.

                      Edited by: pgundala on Mar 5, 2012 4:10 PM
                      • 8. Re: Horizontal scrollbar in interactive report

                        I've the same problem. Did you find a solution?

                        Thank you.

                        • 10. Re: Horizontal scrollbar in interactive report

                          Sorry for resurrecting an old thread but I've finally found a solution to this problem and thought I should post it:


                          On the page containing the interactive report create a new dynamic action.

                          • Event: Change
                          • Selection type: Region
                          • Region: The region containing the IR
                          • Action: Execute Javascript Code
                          • Code: $('#body').width($('#main').width());