Oracle Apex control CSS layout for Standard Report Columns - css

Question

I have an ApEx report where i need to customize the css width of columns differently. For this I'm using the CSS Class attribute in the report:
The CSS Class assigned is as shown: WideColumn
And in the HTML header for the application page :
<style type="text/css">
.WideColumn {
min-width:100px;
}
</style>
This is not taking effect. In fact whatever css attributes are assigned, do not take effect.
I do not want to use the CSS Style section to specify 'display:block;min-width:100px;' due to certain limitations.
What is it that I'm missing out in the column attributes?
I've tried CSS Class within quotes too: 'WideColumn' Please suggest.

Answer 1

The custom row template can not deal with the CSS class definition. The CSS under "Column formatting" normally generates a span element with a class set to it, not the td element. Setting the "Element CSS class" for the element itself will not always help aswell. If your column type is a "Standard Report Column" then no extra html is created.
You also have no option of providing a substitution string in the template itself to create some output.
You could
add an extra column in the source query which will contain a class.
Use the column header in the row template to add this custom class.
alternatively use the class column in the html expression of the
column you want to change. Similar to standard output, you could use
<span class="#CLASSCOL#">#MYCOL#</span> to generate that html.
target the generated column with CSS. For instance, if your template
generates th elements and a headers attribute on td elements
(like in standard reports), you can target those columns much more
easily than fiddling with classes or html expressions. You might need
to adapt the template but it should be generally beneficial.

Answer 2

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');