This discussion is archived
13 Replies Latest reply: Jan 29, 2013 3:45 PM by VANJ RSS

Theme 24 - Standard report - Clear hover highlighting

VANJ Journeyer
Currently Being Moderated
APEX 4.2.1

Theme 24. Report template Standard has the following style
table.uReport > tbody > tr:hover > td {
    background-color: #EFEFEF;
}
How can I get rid of this? I copied the template to a custom template, added a conditional column template with a class but the tr:hover gets in the way and overrides the background color. In other words, Firebug shows that
table.uReport > tbody > tr > td.my_class {background-color:pink}
is over-ridden by the APEX generated style above.

Yes, adding the *!important* keyword to my inline CSS does help to suppress the hover on the td.my_class rows but for the other rows the hover still kicks in. I do not want the hover, period. I thought clearing out the Row Highlighting attributes in the Template properties page would do the trick but that doesn't help, the hover behaviour seems to be hard-wired into the Standard template.

Help? Thanks
  • 1. Re: Theme 24 - Standard report - Clear hover highlighting
    VC Guru
    Currently Being Moderated
    are you using *#HIGHLIGHT_ROW#* in your report template +(Before Each Row section)+ by any chance?
  • 2. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    No. I am using the out-of-the-box Standard report template in Theme 24, I don't see #HIGHLIGHT_ROW# anywhere in the template.
  • 3. Re: Theme 24 - Standard report - Clear hover highlighting
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    APEX 4.2.1

    Theme 24. Report template Standard has the following style
    table.uReport > tbody > tr:hover > td {
    background-color: #EFEFEF;
    }
    How can I get rid of this? I copied the template to a custom template, added a conditional column template with a class but the tr:hover gets in the way and overrides the background color. In other words, Firebug shows that
    table.uReport > tbody > tr > td.my_class {background-color:pink}
    is over-ridden by the APEX generated style above.

    Yes, adding the *!important* keyword to my inline CSS does help to suppress the hover on the td.my_class rows but for the other rows the hover still kicks in. I do not want the hover, period. I thought clearing out the Row Highlighting attributes in the Template properties page would do the trick but that doesn't help, the hover behaviour seems to be hard-wired into the Standard template.

    Help?
    Any chance of an example on apex.oracle.com?

    Do you want the hover highlighting removed from all reports or just this one (or selected ones?). To get rid of it completely, try this somewhere in the cascade after the theme CSS:
    table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    If you just want to remove it from this report/selected reports, add a static region ID and add this to the page CSS:
    #static-region-id table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
  • 4. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    See https://apex.oracle.com/pls/apex/f?p=57688:3

    Report query is
    select 
     trunc(dbms_random.value(1,100)) val
    from dual
    connect by level<=15
    Cloned Standard template to a custom template with Column Template 1 as
    <td #ALIGNMENT# class="my_class" headers="#COLUMN_HEADER_NAME#">#COLUMN_VALUE#</td>
    when
    mod('#VAL#',2) = 0
    Added static region id of foo to the template and added following to page Inline CSS property
    #foo table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    td.my_class {background-color:pink;}
    So the rows with my_class are painted pink, that's fine but all of them still exhibit the hover effect. I don't want to inherit the parent element's background color, I want to eliminate the hover effect entirely.
  • 5. Re: Theme 24 - Standard report - Clear hover highlighting
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    See https://apex.oracle.com/pls/apex/f?p=57688:3

    Report query is
    select 
    trunc(dbms_random.value(1,100)) val
    from dual
    connect by level<=15
    Cloned Standard template to a custom template with Column Template 1 as
    <td #ALIGNMENT# class="my_class" headers="#COLUMN_HEADER_NAME#">#COLUMN_VALUE#</td>
    when
    mod('#VAL#',2) = 0
    Added static region id of foo to the template and added following to page Inline CSS property
    #foo table.uReport > tbody > tr:hover > td {
    background-color: inherit;
    }
    td.my_class {background-color:pink;}
    Try:
    #foo table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color:pink;
    }
    I'm stuck only having access to IE8 for another couple of hours, so proper investigation is impossible...
  • 6. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    Well, now when I hover over a pink row, it does not change to the inherited color (white), but there are still some gray rows in there which change to white upon hovering. Firebugging shows selectors like table.uReport > tbody > tr:nth-child(2n) > td which would do the zebra/alternate row striping. How can this striping and the hover effect be suppressed? Surprised that such a simple thing is turning out to be so difficult!
  • 7. Re: Theme 24 - Standard report - Clear hover highlighting
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    Well, now when I hover over a pink row, it does not change to the inherited color (white), but there are still some gray rows in there which change to white upon hovering. Firebugging shows selectors like table.uReport > tbody > tr:nth-child(2n) > td which would do the zebra/alternate row striping.
    What was I saying? IE8 doesn't support the <tt>:nth-child</tt> pseudo-class selector, so I was seeing none of that earlier... ;-)
    How can this striping and the hover effect be suppressed?
    More of the same:
    #foo table.uReport > tbody > tr:nth-child(2n) > td {
      background-color: #F8F8F8;
    }
    #foo table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color: pink !important;
    }
    Surprised that such a simple thing is turning out to be so difficult!
    It's because the default APEX 4.x page templates make it more difficult to apply CSS overrides using the cascade (Re: Bizarre IRR Button Colors in IE (Only!)). This&mdash;and the use of more sophisticated selectors (which I'm all for)&mdash;means that specificity tends to become an issue. My advice is to take advantage of the CSS/page template enhancements in APEX 4.2 and position the <tt>#PAGE_CSS#</tt> substitution string after the theme CSS reference in page templates, so that overrides can be applied at page level using the cascade, avoiding most specificity concerns.

    However, in this case the simplest approach might be to include an inline style in the report template, as this will override all of the other styles:
    <td #ALIGNMENT# class="my_class" style="background-color: pink" headers="#COLUMN_HEADER_NAME#">#COLUMN_VALUE#</td>
  • 8. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    More of the same
    Hm, I tried that and it doesn't appear to give the result I am looking for. There are 3 colors (white, gray-ish and pink). Hovering over the grayish rows turns them to white (inherit). I want no hover effect.

    Maybe some surgically placed !important keywords and inherits will do the trick but this is too darn painful. Also, I wouldn't know to use the *#F8F8F8* color without diving into the page source and/or Firebug! Kinda goes against the declarative, easy-to-use ethos of APEX!
    position the #PAGE_CSS# substitution string after the theme CSS reference in page templates, so that overrides can be applied at page level using the cascade, avoiding most specificity concerns.
    Not sure I understand. The No Tabs - No Sidebar page template in Theme 24 does have the #PAGE_CSS# after the #THEME_CSS# but there is a hard-wired reference to theme_24/css/4_1.css after that (see below). I am confused, what's the difference between THEME_CSS and theme_24/css/4_1.css?

    Besides, even after moving the PAGE_CSS right before the closing HEAD tag, I still get the hover effect. Why is this? (I left the page at this point, if you want to poke around)
    The order was changed in 4.0 to allow theme-specific styles for Interactive Reports to override the default IR styling in core APEX CSS (another component included in the #HEAD# substitution). They should have used another way to do this as it was a lot easier to talk noobs through CSS overrides using page HTML Headers than it is now...)
    I couldn't agree more with your summary and recommendation! This is a major headache IMHO. It used to be so easy to override built-in styles by simply including CSS snippets in the page header without worrying about the complexities of cascades, specificity and assorted CSS wizardry!

    Can someone from the Oracle APEX team please review and comment on the rationale behind this decision and what the recommendation is for the situation we are discussing?
    However, in this case the simplest approach might be to include an inline style in the report template
    Gasp, Doc, say it ain't so! Mixing markup and presentation, nooooo that's so 1990s! Seriously though, I added that to the page but I still see the hover effect. Sigh, this is too frustrating, I give up.
    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>#TITLE#</title>
      <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
      #APEX_CSS#
    #TEMPLATE_CSS#
    #THEME_CSS#
    #PAGE_CSS#
    #APEX_JAVASCRIPT#
    #TEMPLATE_JAVASCRIPT#
    #APPLICATION_JAVASCRIPT#
    #PAGE_JAVASCRIPT#
    #HEAD#
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css">
      <script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
    </head>
    <body #ONLOAD#>
      <!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]-->
      #FORM_OPEN#
      <div id="uBodyContainer">
  • 9. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    Paul - Buddy, did I lose you there? :-)
  • 10. Re: Theme 24 - Standard report - Clear hover highlighting
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    Paul - Buddy, did I lose you there? :-)
    Yeah. I'm only an APEX hobbyist at present. The day job has me working with Teradata. No PL/SQL or APEX there :(. Makes me very grumpy.

    Added to that only having IE8 and WWV_FLOW_PAGE_PLUG_IDX2 violated when creating theme on apex.oracle.com then I've not had opportunity to look at this again. You'll have to wait until tomorrow night ;-)
  • 11. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    Paul - Any luck with this? Thanks
  • 12. Re: Theme 24 - Standard report - Clear hover highlighting
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    More of the same
    Hm, I tried that and it doesn't appear to give the result I am looking for. There are 3 colors (white, gray-ish and pink). Hovering over the grayish rows turns them to white (inherit). I want no hover effect.
    OK, to suppress the hover and alternate striping (tested in Safari 6.0, Firefox 18.0, IE 8):
    #foo table.uReport > tbody > tr:nth-child(2n) > td {
      background-color: inherit;
    }
    #foo table.uReport > tbody > tr:hover > td {
      background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color: pink;
    }
    (Can't combine the first two into one rule as IE 8 will ignore it as it doesn't support <tt>nth-child</tt>.)
    Maybe some surgically placed !important keywords and inherits will do the trick but this is too darn painful. Also, I wouldn't know to use the *#F8F8F8* color without diving into the page source and/or Firebug! Kinda goes against the declarative, easy-to-use ethos of APEX!
    If you want to retain the alternate striping (not sure this is a good idea, to me it never looks good in conjunction with conditional formatting):
    #foo table.uReport > tbody > tr:nth-child(2n):hover > td {
      background-color: #F8F8F8;
    }
    #foo table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color: pink !important;
    }
    Which is less satisfying as it requires that insider information about the stripe colour, and an <tt>!important</tt> directive.
    position the #PAGE_CSS# substitution string after the theme CSS reference in page templates, so that overrides can be applied at page level using the cascade, avoiding most specificity concerns.
    Not sure I understand. The No Tabs - No Sidebar page template in Theme 24 does have the #PAGE_CSS# after the #THEME_CSS# but there is a hard-wired reference to theme_24/css/4_1.css after that (see below). I am confused, what's the difference between THEME_CSS and theme_24/css/4_1.css?
    The jury is still out on what&mdash;if anything&mdash;#THEME_CSS# does. I did indeed mean after the <tt>link rel="stylesheet"</tt> element.
    Besides, even after moving the PAGE_CSS right before the closing HEAD tag, I still get the hover effect. Why is this?
    Specificity. (Hard to understand, harder still to say.) There are various specificity calculators around that can be used to try to figure things out. Plus I think the <tt>inherit</tt> property is ignoring values set using pseudo-classes (i.e. the :hover rule doesn't inherit the background colour from the value set by the previous :nth-child rule, although they should both apply to the same element). Need to do some more research on this.
  • 13. Re: Theme 24 - Standard report - Clear hover highlighting
    VANJ Journeyer
    Currently Being Moderated
    Paul - Thanks a lot for taking the time to investigate this for me. I am little closer to understanding what is going on but I am still dissapointed that APEX is making a simple style override so darn difficult.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points