Oracle Apex - Position IR Control Panel items in one line

This mini tip is to help those who does not know CSS much and those who know CSS but do not know where to apply code in Oracle Apex.

In Interactive reports by default the control panel items (filters/report titles) etc will be displayed one line below the other. If you have ten filters applied on an IR/Interactive Report then the panel when expanded occupies 10 lines in the report just like the one below:


This mini tip will enable you to change this like the one below:

If you have a Page 0/Global Page created within your application do not follow step 1.

Step 1: Create a Global Page/Page 0 in your application.
Step 2: Create a HTML region with template "No template" in this page.
Step 3: Add the following CSS inside this region source and save.

<style>
  table#apexir_CONTROL_PANEL_COMPLETE tr{float:left;padding-right:15px;}
</style>

This is all you have to do to change Interactive report's control panels visibility option in your entire application. The magic is not done by the little piece of code you have added now, but the way in which Global Page/Page 0 acts within an application.

All piece of code inside this special page will be executed whenever a page within the application is invoked. Kudos to the Oracle Apex designers who have made this available to us.

The second part of magic is the little piece of code you have added. Inside Oracle Apex, you can have only 1 interactive report in a page. All these reports control panels will be created with a table with id apexir_CONTROL_PANEL_COMPLETE. By specifying that rows are displayed in a single line you are utilizing the space available to the users.