Realign APEX Interactive Components

It’s fairly common to change the look of an apex component via javascript. This could be for a variety of reasons, some of which we discussed in APEX Instant Tips episode 75. The problem is that sometimes this causes page elements to shift out of alignment. This is particularly true for headers of reports (classic reports, interactive reports, interactive grids). (Note: I’m working on the page SEO right there. Next time I search “how do I align my APEX interactive report headings” I want to find this page and realize that I should already know the answer.)

You can get more details on this topic by watching APEX Instant Tips episode 75.

You can see what I’m talking about in the image below. I’ve made an exaggerated example; the Job column does not match the heading.

To solve the problem, you need to trick APEX into thinking the page has been resized. Whenever you do something to dynamically format the page, typically via a dynamic action, you can add an additional line of javascript code (or an additional true action to run this line of code).

$(window).trigger("apexwindowresized");

That will trigger the event that tells APEX to realign things…like Interactive Report columns.