Sunday, November 10, 2019

Region Display Selector - How to Prevent Scroll on Page Load

A few days ago I visited my dear friends Aljaž Mali and Andrej Grlica and they had one interesting case. They had a page where they used region display selector in Scroll Window mode to display some regions in tabs. Since region display selector wasn't positioned on top of the page, on page load navigation was scrolled down to the first tab region (as in this example).

To fix it, the first thought from Andrej and me was to somehow do it with JavaScript, but after we examined JS API we concluded that there isn't any clean solution.

And then, as always, four eyes are better than two...we came out with a nice but dirty solution.

The Fix

To fix it you need to:
  • create a dummy region with Region Display Property turned on an put it before all other regions with that property on
  • use region template - Blank with Attributes 
  • add Static ID (in our case it was noScrollTab)
  • add the following CSS to the page either as inline CSS or to the external static file (preferred way)


What have we done here? We created a region on the first position in region display selector - the region that usually is scrolled down to on page load and then with CSS we've positioned it to the top left corner of the page and hid it.

The demo is available here.

Tested in APEX


No comments:

Post a Comment