Forum Stats

  • 3,784,143 Users
  • 2,254,897 Discussions
  • 7,880,709 Comments

Discussions

Categories

Theme 24 - Standard report - Clear hover highlighting

partlycloudy
partlycloudy Member Posts: 8,099 Silver Trophy
edited Jan 29, 2013 6:45PM in APEX Discussions
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
· Share on TwitterShare on Facebook

Best Answer

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    edited Jan 22, 2013 10:34AM Accepted Answer
    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;
}
    · Share on TwitterShare on Facebook
«1

Answers

  • VC
    VC Member Posts: 2,413 Gold Trophy
    edited Jan 22, 2013 9:56AM
    are you using *#HIGHLIGHT_ROW#* in your report template +(Before Each Row section)+ by any chance?
    · Share on TwitterShare on Facebook
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    edited Jan 22, 2013 9:59AM
    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.
    · Share on TwitterShare on Facebook
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    edited Jan 22, 2013 10:34AM Accepted Answer
    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;
}
    · Share on TwitterShare on Facebook
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    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.
    · Share on TwitterShare on Facebook
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    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...
    · Share on TwitterShare on Facebook
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    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!
    · Share on TwitterShare on Facebook
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    edited Jan 22, 2013 4:50PM
    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 (as I've discussed before). 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>
    · Share on TwitterShare on Facebook
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    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">
    · Share on TwitterShare on Facebook
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    Paul - Buddy, did I lose you there? :-)
    · Share on TwitterShare on Facebook
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    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 2475486 then I've not had opportunity to look at this again. You'll have to wait until tomorrow night ;-)
    · Share on TwitterShare on Facebook
This discussion has been closed.