How to Dynamically Set Column Width in Oracle Apex

Question

I have two classic reports that are dynamically created from a PL/SQL returning function. The data of each report generally contains the same data, but their column names are generally different.

I would like them aligned vertically, but the differences in column names makes the column widths different. My goal is to set each column width to the greater of the first or second report's column, for each column. I think I'll just find the greater of each column length and multiple by a set pixel amount for that.

However, how would I go about setting the column width dynamically in the first place, for dynamically generated reports?

Answer 1

You can do this with some Javascript using the jQuery library built into APEX.

(WARNING: My Javascript isn't the world's most elegant!)

This worked for me:

1) In the "Function and Global Variable Declaration" attribute of the page create this function:

function setColWidths(colId) {
    var maxWidth = 0;
    $('th#'+colId).each (function (index) {
        w = $(this).width();
        maxWidth = Math.max(maxWidth,w);
        });
    $('th#'+colId).each (function (index) {
        $(this).width(maxWidth);
        });
}

2) In the "Execute when Page Loads" attribute of the page call the function for each column:

setColWidths('COL01');
setColWidths('COL02');
setColWidths('COL03');

You could perhaps enhance this solution so that you don't need to call the function explicitly for each column.