This discussion is archived
10 Replies Latest reply: Sep 19, 2013 3:50 AM by Waggers RSS

Horizontal scrollbar in interactive report

866384 Newbie
Currently Being Moderated
Hello,

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.
Andrius
  • 1. Re: Horizontal scrollbar in interactive report
    866384 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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
    866384 Newbie
    Currently Being Moderated
    Hello,

    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="">
    <tbody>
    <tr>
    <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>
    </tr>
    </tbody>
    </table>
    </div>

    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;}     
    </style>

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

    Br,
    Andrius
  • 4. Re: Horizontal scrollbar in interactive report
    Wouter Breeuwsma Newbie
    Currently Being Moderated
    Hello,

    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
    878213 Newbie
    Currently Being Moderated
    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
    911012 Newbie
    Currently Being Moderated
    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...
    http://i.imgur.com/umM9z.png

    Edited by: PandaOracle on Feb 14, 2012 12:41 PM
  • 7. Re: Horizontal scrollbar in interactive report
    878213 Newbie
    Currently Being Moderated
    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
    Kirsten Newbie
    Currently Being Moderated
    Hi,

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

    Thank you.

    Kirsten
  • 9. Re: Horizontal scrollbar in interactive report
    Kirsten Newbie
    Currently Being Moderated
    Nobody?
  • 10. Re: Horizontal scrollbar in interactive report
    Waggers Newbie
    Currently Being Moderated

    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());

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points