Oracle Apex control CSS layout for Standard Report Columns

1
votes

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: Page --> Region --> xyz Report --> Column Attribute --> Column Formating


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.

2
cssoracle-apex
What Theme and Report template do you use? – Tom
I'm using custom template and theme. in the template I've defined the width for the report's(table) data(td) and header(th), but I need to assign this particular column a css class, and add some more properties. – sledge-hamster
Is it a report row or a report column template? – Tom
its a report row template.. similar to standard report template – sledge-hamster

2 Answers

1
votes

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.
0
votes

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