Oracle APEX Interactive Reports allow columns to be filtered via the help of a pop-up box. Sometimes this box isn’t wide enough to show your data and the items are truncated. This guide explains how you can specify a custom filter width without changing the theme.
Filter Width Problem
Here is an example of the filter pop-up width problem :
The pop-up isn’t wide enough to show the full company name for “Lewis & Mallone Industrial Chemicals Inc” and truncates it to “Lewis & Mallone Industrial Chemica…”. This may not matter in many applications but it can be irritating if it does matter.
There are two techniques you can use to change the width of this filter box. One only affects a single page while the other affects all pages in the application. You can choose the method that is most appropriate for your APEX application.
Single Page Level Custom Filter Width
If you only want to change the width on a specific page then you can follow these steps :
- Select page in left-hand tree
- Under “CSS” section insert following into “Inline” text box :
.a-IRR-sortWidget{width:300px;}
The width can be set to the required value. This can be different on different pages.
Application Level Custom Filter Width
The width can be changed across all pages in an application using the following steps :
- Create a new text file named “my_custom.css”
- Insert the following :
.a-IRR-sortWidget{width:300px;} - Save the file
- Navigate to “Shared Components”
- Select the “Static Application Files” link
- Click the “Upload File” button
- Click the “Choose Files” button and browse to your CSS file
- Click the “Upload” button
- Cut-n-paste the “Reference” for this file. It will look something like :
#APP_IMAGES#my_custom.css
- Navigate back to “Shared Components”
- Click the “User Interface Attributes” link
- Click the Edit (pencil) Icon next to the interface you want to change (e.g. “Desktop”)
- Paste following info into the “Cascading Style Sheets” “File URLs” text box :
#APP_IMAGES#my_custom.css
Add as a new line if there is already content there.
- Finally click the “Apply Changes” button
The filter width should now be changed across all Interactive Reports regardless of what page they are on.
Update CSS File
To update the CSS file simply edit a local copy with the same filename and re-upload using the same process as previously explained.
Final Pop-Up with Custom Filter Width
The result should look something like this :
In most of my apps I don’t use this technique as the truncated items don’t matter. I tend to find it useful if there are lots of items where the first 30 or so characters are the same. Once truncated it can be difficult to tell the difference.