APEX

I'm running into this issue as well on wider Apex reports. There doesn't seem to be a good way to scroll horizontally and having to go to the bottom of the page makes navigation really awkward.

Hello,

A collegue and I discussed the same thing a few dasy ago...(5.0.2 Theme 42)

On could argue that this is a ugly design issue. Maybe the div-construction needs a littel adjustment?

It would be great if someone form the Apex-Dev team could say some words for clarification.

Thank you in advance!

Andre

Hi there,

This is indeed a tricky problem to solve, especially when using any responsive user interface, such as Universal Theme. 

The reason this happens is because components within a responsive ui are placed into a grid-based layout which is resized / re-positioned depending on the size of your screen.  This also means that no content can escape the confines of this grid they are placed in, which is why the horizontal scrollbars appear at the bottom of the page rather than the bottom of your browser window.

Fortunately, there are ways around this, but you'll need to think of the solution a little differently than simply adding scrollbars to the bottom of the page.  Here's an app I created on apex.oracle.com that showcases two methods to get this working.

Method 1 uses the Maximum Region Height attribute for Interactive Reports, and Method 2 uses the Maximize Button, which is my recommended approach for large reports. 

Hope this helps!

Best,

Shakeeb

Thanks, Shakeeb. Great response.

Users also have the ability to shift+scroll to scroll sideways with the mouse.

People using the maximize option may also encounter this

I'm going to respectfully disagree with Shakeeb a little. Both methods both fall short of what the OP asked for and what I think would be the ideal - horizontal scrollbar on the bottom of the browser window.

Method 1 suffers from nested scroll bars and depending on the fixed height of the IR region and the height of the browser window the horizontal scroll bar may still be off screen. This method can be made to work if the height of the region is managed dynamically and adjusted such that there is never a vertical scroll bar on the browser window - a technique that Page Designer uses.

Method 2 suffers from having to go in and out of an expanded mode. So you can either navigate your report with ease or use other parts of the page such as left hand navigation side bar but not both at the same time.

So I propose a third method you can try here

The popular trick of using position fixed headers to create a "viewport" while still using the browser window scroll bar to scroll within that view port should work in both the vertical and horizontal directions not just vertical. That is you should be able to have content that is wider than your screen with fixed left and/or right side bar content but still use the window horizontal scrollbar to see the content.

What I have done is find IRR regions where the table is wider than its container. Then I add the largest difference between the table and its container to the body width. Now the page has a horizontal scroll bar. There is more work involved to make sticky table column headers scroll, to update the body width if the IRR is refreshed (because columns can be added and removed that affects the width) and update the body width if the window resizes,

Here is the code I added to Execute when Page Loads:

function adjustBodyWidth() {
    var w, delta = 0;
    $(".a-IRR-table").each(function() {
        var d = $(this).width() - $(this).parent().width();
        if ( d > delta ) {
            delta = d;
        }
    });
    if ( delta > 0 ) {
        w = $("body").width();
        $("body").width(w + delta);
    }
}

adjustBodyWidth();
$(window).on("apexwindowresized", function() {
    adjustBodyWidth();
});

var lastX = 0;

$(window).on("scroll", function() {
    var x = window.scrollX;
    if ( x !== lastX ) {
        lastX = x;
        $(".js-stickyWidget-toggle").each(function() {
            var sw$ = $(this),
                d = sw$.parent().offset().left - x;
            if ( sw$.hasClass("is-stuck")) {
                sw$.css("left", d + "px");
            } else {
                sw$.css("left", "");
            }
        });
    }
});


// sticky widgets aren't created yet so wait. Perhaps better to listen for create
setTimeout(function() {
    $(".js-stickyWidget-toggle").each(function() {
        var sw$ = $(this);

        // these should be reall events not callbacks!
        sw$.stickyWidget("option", "onStick", function() {
            var d = sw$.parent().offset().left - window.scrollX;
            sw$.css("left", d + "px");
        });
        sw$.stickyWidget("option", "onUnstick", function() {
            sw$.css("left", "");
        });
    })
}, 500);

$("body").on("apexbeforerefresh", function() {
    $("body").css("width","");
});
$("body").on("apexafterrefresh", function() {
    adjustBodyWidth();
});

and a small CSS fix added to Page inline CSS

.t-Body-nav {
  z-index: 400;
}

Warning: The above code is not well tested. It is not future proof. For example, I really should fix the stickyWidget onStick, onUnstick options to be true events.

What I would like to know is if this is desirable UX?  That is when the report columns won't fit horizontally should the window have a horizontal scroll bar?

Is it good for desktop but bad for tablets/phones?

Should it be the default behavior?

If you try it in your own apps, what does and doesn't work and did you have to adjust/fix the code?

Thanks,

-John

Hi John,

This UX is desirable to our users, and matches behaviour seen in 4.x theme 25.

We are migrating a reporting app to UT now and this issue has been spotted. I can test this code on quite a few pages, though it looks like it could live on the global page. We're testing over the coming weeks so I can come back with details.

This app was previously not used on the 10" tablet, but we feel confident that the UT will handle everything relatively well for both desktop and tablet. At first glance, this issue is not a problem on the tablet because tap navigation negates need for scrollbar.

I'd suggest it would be optional behaviour, not sure about default. And it could also apply to Classic reports.

Scott

Hi all,

if I understand all the posts so far correct, we have a situation where:

a) Oracle (in persona Shakeeb and John) has confirmed this is an issue or valid request (well sounds much better :-) )

b) Shakeeb and John has already though about it how to solve this (until now as a work around only)

c) Scott in friendly enough to do testing over the coming weeks and come back with details.

The idea from Scott to make the requested behavior optional (for IR and Classic reports) sounds quite good.

Thanks to all of you for taking the time to care about that!

A question (to the dev team): Is it a valid assumption that this could be part of the (first?) EA for 5.1? Wouldn’t this make sense? 

Thank you and best Regards

Andre

An interesting idea - and certainly functionality to take forwards.

I think it might be good to keep (or be able to keep) the "Search Bar" element on screen - as happens with the existing default scroll functionality in the UT (the _toolbar <div>)

Sorry to latch on to an old thread...but I'm trying to convert an app of ours that was the old Blue-Gray #13 Theme to Universal Theme...It seems like my page is a bit different than what has been suggested so far in all the posts I've found, so wanted to mention it since it seems there are some Oracle folks watching this thread.

I'm on my laptop, 22" monitor, using Chrome and we are on APEX 5.0.00.03

1 - I'm not even seeing a horizontal scrollbar anywhere to begin with...I scroll all the way down to the bottom of the page - no scroll bar....there are 12 columns not visible from the page unless I make the zoom really small

2 - I don't see a Heading property anywhere to try to change to 'fixed'

(I'm looking at this post where the OP put some awesome screenshots...horizontal scroll bar in APEX 5...when I go to my region>Attributes>Properties under Heading I only have the option 'Type' which is currently Custom Headings...I don't have an 'Fixed To' property anywhere. The Attributes template is set to Standard)

3 - I've tried setting the Template Default 'Show Maximize Button' so that it is checked, but when I run the page the Maximize button is nowhere to be found (this option would actually be what I preferred, if it worked)

The only thing I can think of is my region Template is set to Interactive Report, but my Type is set to Classic Report (based on Function) since I'm loading the results based on a collection in the Source for the region...but that seems like something that should be included when considering whether or not the page displays the scroll bar or at least the Maximize Button.

Thanks,

Janel

P.S.  I did finally get a horizontal scrollbar to show by putting a div in the region header and footer...but if there is a better way to get this accomplished I'd love to know it.  Thanks!

<div style="width:165em;overflow-x:scroll;">

Classic Reports do not support fixed headers. That is why you don't see that Fixed To option. This thread is fairly specific to Interactive Reports.

Your div solution is probably not too bad. There may be a better region template or other css rules but I'm not as familiar with that so I'll let someone else comment.

Regards,

-John

Hi Shakeeb,

thanks for your possible solutions with wider IRs. I'm also facing the problem.

I also prefer your second version with the maximize Button (which I've already set in Template Options)

But unfortunately it's not working. I still have to scroll down to get the horizontal scroll bar.

I made all your Steps. Do you have an idea why it's not working for me? Working with Application Express 5.0.3.00.03

EDIT: Okay I figured out why it was not working for me. You also have to fix the report heading to page level! ;-)

Thanks

matze276