Forum Stats

  • 3,757,254 Users
  • 2,251,216 Discussions
  • 7,869,779 Comments

Discussions

Table row select vs hover

J Keller
J Keller Member Posts: 11 Blue Ribbon
edited Aug 5, 2021 11:51AM in JDeveloper and ADF

I have set CSS properties to change the background color of selected rows:

  • .AFTableCellDataSelectedInactive:alias { background-color: #E8D8AC }
  • .AFTableCellDataSelectedBandedInactive:alias { background-color: #CEC6AB }
  • .AFTableCellDataSelected:alias { background-color: #E8D8AC; }
  • .AFTableCellDataSelectedBanded:alias { background-color: #CEC6AB; }
  • .AFTableCellDataSelectedFocused:alias { background-color: #E8D8AC; }
  • .AFTableCellDataSelectedBandedFocused:alias { background-color: #CEC6AB; }

I have also set various styles for when I hover-over the rows:

  • af|table::data-row:highlighted af|column::data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }
  • af|table::data-row:highlighted af|column::banded-data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }

However, the former takes precedence over the latter (so hovering over a selected row doesn't change the style). Is there any way I can get the hover style to take priority?

Tagged:

Best Answer

  • J Keller
    J Keller Member Posts: 11 Blue Ribbon
    Accepted Answer

    I was able to get it working the way we wanted using these settings:

    /* style for selected rows (with variations for focus states) */

    • af|table::data-row:selected     af|column::data-cell { background-color: #E8D8AC;; }
    • af|table::data-row:selected:focused af|column::data-cell { background-color: #E8D8AC; }
    • af|table::data-row:selected:inactive af|column::data-cell { background-color: #E8D8AC;; }
    • af|table::data-row:selected     af|column::banded-data-cell { background-color: #CEC6AB }
    • af|table::data-row:selected:focused af|column::banded-data-cell { background-color: #CEC6AB; }
    • af|table::data-row:selected:inactive af|column::banded-data-cell { background-color: #CEC6AB }

    /* style for highlighting rows as the mouse moves over them */

    • af|table::data-row:hover af|column::data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }
    • af|table::data-row:hover af|column::banded-data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }

Answers

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,543 Red Diamond

    User, tell us your exact JDev version, please!

    Have you tried to add the color to the skin selectors instead of using the alias?

    Timo


  • J Keller
    J Keller Member Posts: 11 Blue Ribbon

    We're not using JDev. We're using:

    • Microsoft Edge Version 92.0.902.62 (Official build) (64-bit)
    • OS Version: Windows Server 2016
    • Web Server: Apache Tomcat (TomEE)/9.0.45 (8.0.6)
    • Java Version:1.8.0_301

    We've also tested with WebLogic 12.2.1.3 and other browsers (IE, Firefox, and Chrome).

    We've used the color names (e.g. "red") instead of the hex codes, if that's what you mean.

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,543 Red Diamond

    If you don't use JDev, why do you see ADF skin selectors?

    How do you want to change them without a new deployment?


    And, no, I don't mean to use color names but to user the skin selector for a table cell in hover mode instead of relying on the .AF...:alias selector. If the skin selector you are using now overwrite the alias class, then use the sink selector to change the color for the hoover case too.


    Timo


  • J Keller
    J Keller Member Posts: 11 Blue Ribbon

    We're creating the CSS based on various guidance we've found on the web. We can change them and deploy them whenever we want. We're just trying to figure out what they should be.

    I'm not sure what a "skin selector" is; I'll try to research that. Based on your reply, I assume the ".AF*" entries are "alias selectors", and the "af|table" entries are "skin selectors"?

    We're mainly using this page: https://docs.oracle.com/cd/E15523_01/apirefs.1111/e15862/toc.htm

    We have not found any .AF ones for controlling the hover style.

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,543 Red Diamond

    You are right about the aliases and the skin selectors.

    You are looking at an old version of the skin documentation. I strongly recommend using the exact version of the application you are using. The skin descriptors have changed over the years and there might be some new ones.

    the problem I see is that when you use a skin selector, you'll need some other program to generate the css based on your changes. A skin selector is not a css class.


    Timo


  • J Keller
    J Keller Member Posts: 11 Blue Ribbon

    Thank you for the responses.

    Our CSS file isn't generated; we created it manually. Or perhaps you're referring to the HTML (generated at run-time from the CSS and JSF/ADF)?

    The row colors work, whether we use the aliases (.AF*) or the other format (af|table*).

    The hover-style works too (using af|table::data-row:highlighted), but only for unselected rows. We've tried combining the pseudo-classes as the documentation says (e.g. "af|table::data-row:selected:highlighted"), but that didn't work.

    I'll see if I can find other versions of the documentation. I'm not sure which "application version" is relevant in this context (TomEE, WebLogic, Edge, etc).

  • J Keller
    J Keller Member Posts: 11 Blue Ribbon
    Accepted Answer

    I was able to get it working the way we wanted using these settings:

    /* style for selected rows (with variations for focus states) */

    • af|table::data-row:selected     af|column::data-cell { background-color: #E8D8AC;; }
    • af|table::data-row:selected:focused af|column::data-cell { background-color: #E8D8AC; }
    • af|table::data-row:selected:inactive af|column::data-cell { background-color: #E8D8AC;; }
    • af|table::data-row:selected     af|column::banded-data-cell { background-color: #CEC6AB }
    • af|table::data-row:selected:focused af|column::banded-data-cell { background-color: #CEC6AB; }
    • af|table::data-row:selected:inactive af|column::banded-data-cell { background-color: #CEC6AB }

    /* style for highlighting rows as the mouse moves over them */

    • af|table::data-row:hover af|column::data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }
    • af|table::data-row:hover af|column::banded-data-cell{ background-color: transparent; font-weight: bold; border-top: 1px solid; border-bottom: 1px solid; }
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,543 Red Diamond

    It's the ADF version you use. The ADF runtime you installed on the server.

    And from your working solution I see that you are on an ADF 12.x version as the ':hover' was not available in ADF 11.x versions.

    That was the reason I'd ask for the ADF version :)

    Timo