Smart Way to Wrap Long Column Headers in Oracle APEX Interactive Grid

In Oracle APEX, long column names in Interactive Grids often make the headers look cluttered or misaligned. Many developers manually insert <br> tags in the column headings to fix this — but that’s time-consuming and hard to maintain.

Here’s a smarter and cleaner way!
With a small JavaScript snippet, you can automatically wrap column headers wherever you want — simply by adding an underscore (_) in the column name. The script detects these underscores and replaces them with line breaks (<br>), giving you perfectly wrapped headings without touching the HTML.

Just add this script to the Page Load event, and your column headings will format themselves dynamically based on the number of underscores. Clean, flexible, and maintenance-free!

$("#EMP th span.a-GV-headerLabel").each(function() { // Emp - static id of the IG

let text = $(this).text();

if (text.includes("_")) {

$(this).html(text.replace(/_/g, "<br>"));

}

});

Demo_Application

Comments

APEX - Tip: Fix Floating Label Issue

Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items. These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input. However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () { $("#P29_EMAIL,#P29_...

Oracle APEX UI Tip: Display Page Title Next to the APEX Logo

In most Oracle APEX applications, every page has a Page Title displayed at the top. While useful, this title occupies vertical space, especially in apps where screen real estate matters (dashboards, reports, dense forms). So the goal is simple: Show the page title near the APEX logo instead of consuming page content space. This keeps the UI clean, professional, and consistent across all pages. Instead of placing the page title inside the page body: ✅ Fetch the current page title dynamically ✅ Display it right after the APEX logo ✅ Do it globally, so it works for every page All of this is achieved using: ✅ Global Page (Page 0) ✅ One Dynamic Action ✅ PL/SQL + JavaScript Simple, effective, and reusable. 1️⃣ Create a Global Page Item On Page 0 (Global Page), create a hidden item: P0_PAGE_TITLE This item wi...

Interactive Grid Tips (Part-1)

Selection Toolbar Events Validation Styling Advanced Selection 1 Get Selected Row Primary Key Return selected row PK values to a page item. Two approaches depending on APEX version. Selection APEX 24.2+ Before 24.x Copy // Initialization JavaScript Function function (options) { options.defaultGridViewOptions = { selectionStateItem: "P22_SELECTED_IDS" }; return options; } Copy var ig$ = apex.region( "EMP" ).call( "getViews" , "grid" ); var model = ig$.model; var selectedIds = []; ig$.view$.grid( "getSelectedRecords" ).forEach( function (rec) { selectedIds.push(model.getValue(rec, "EMPNO" )); }); $s ( "P22_SELECTED_IDS" , ...

Think APEX

Search This Blog