APEX-BUG? Row Highlighting and Mouseover

Question

Hello Experts,
I build a classic report on APEX 4.0.2 with different column templates depending on the dep_id-row. (If dep=30 I want a green row)
You can see this at [http://apex.oracle.com/pls/apex/f?p=12579:5:164720075315678:::::|http://apex.oracle.com/pls/apex/f?p=12579:5:164720075315678:::::]
After F5 all columns for dep 30 are in green. If you move the mouse over the report the rows become grey. After next F5 you will again see the green background color.
The template is defined as follows:
Column Template 1
<td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data" style="background-color:#EEEEEE;">#COLUMN_VALUE#</td>
Column Template 1 Condition
Used Based on PL/SQL Expression
Column Template 1 Expression
#DEPARTMENT_ID# <> 30
Column Template 2
<td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data" style="background-color:#8FE98F;">#COLUMN_VALUE#</td>
Column Template 2 Condition
Used Based on PL/SQL Expression
Column Template 2 Expression
#DEPARTMENT_ID# <> 30#DEPARTMENT_ID# = 30
I'm shure that this already worked fine.
Is there a way to use Row Highlighting together with Column Templates ?
Thanks for any idea!
Frank
Edited by: frank_schmidt on 23.02.2011 02:01
Edited by: frank_schmidt on 23.02.2011 07:41

Answer 1

I can see that when the mouse moves over a row, the row cell(td) are applied a background-color, this is not via a class but it is set directly at the column level.
So I guess it is some JS code that does it.
If that be the case, irrespective of the css classes or inline styles you specify for the column,they would be overridden(element.style > class ) and overwritten(td.backgroundcolor is set directly). So JS code that does this has to be disabled first.
If you remove the 'highlight-row" class from the table row( tr) element either in the template or if its for just one report, do it directly in the Page using JS by
$('tr.highlight-row').removeClass('highlight-row');Now inorder to get the row highlighting(without removing the original styling on mouseout), change the template to use a class and move the background color under the class( background-color:#8FE98F).
If you highlighting to work with FF alone, you can define the :hover pseudo class
{code}
tr.highlight-row td:hover{
background-color:#CDCDCD;--use the mouse over color
{code}
But if it has to work with all browsers, you would have to rewrite the row highlighting JS