This discussion is archived
7 Replies Latest reply: Nov 16, 2012 10:46 AM by Vik Kumar RSS

row highlighting is gone on enabling inline style for columns

Vik Kumar Explorer
Currently Being Moderated
We have a multi-select enabled table on which cusomter wanted to change the color based on row stauts (a column in the table).

We did it on the column component of the table as background-color:#{row.Status == 'Inactive'? '#A5A5A5': row.Status == 'Draft'?'#D8D8D8':''};

this works great though as soon as this is done the row highlight color is gone from the table and hence makes it impossible to know which rows are actually selected.


we are using RUP3 (Rel 4) version of jdev 11.1.1.6.2 version from edelivery.
  • 1. Re: row highlighting is gone on enabling inline style for columns
    Frank Nimphius Employee ACE
    Currently Being Moderated
    Hi,

    I would add this on the component that renders the cell content, not the component to not conflict with the default CSS settings

    Frank
  • 2. Re: row highlighting is gone on enabling inline style for columns
    AlejandroProfet Journeyer
    Currently Being Moderated
    Hi,

    You can put this rules in your CSS styles in order to customize the tables (the last two lines ensure highlighting):
    af|table::status-message {background-color: #0090c1; color: white; border: 2px #a0b4ba inset;}
    af|table::column-resize-indicator {border: 1px solid #51bfff;}
    af|table::data-row:selected af|column::data-cell {border-top: 1px solid #00afea; border-bottom: 1px solid #00afea;}
    af|table::data-row:selected af|column::banded-data-cell {border-top: 1px solid orange; border-bottom: 1px solid orange;}
    af|table::data-row:selected:focused af|column::data-cell {border-top: 1px dashed #00afea; border-bottom: 1px dashed #00afea;}
    af|table::data-row:selected:focused af|column::banded-data-cell {border-top: 1px dashed orange; border-bottom: 1px dashed orange;}
    af|table::data-row:selected:inactive af|column::data-cell {border-top: 1px solid #84e0ff; border-bottom: 1px solid #84e0ff;}
    af|table::data-row:selected:inactive af|column::banded-data-cell {border-top: 1px solid green; border-bottom: 1px solid green;}
    af|table::data-row:hover af|column::data-cell,af|table::data-row:hover af|column::banded-data-cell {background-color: #bfd6b0 !important;}
    af|table af|column::data-cell:selected {background-color: #9CACC9 !important;}
    AP
  • 3. Re: row highlighting is gone on enabling inline style for columns
    Vik Kumar Explorer
    Currently Being Moderated
    Frank if i do the same on the actual component instead of column component then what happens is the background color only comes up to the text and not on the entire column. So that looks ugly
  • 4. Re: row highlighting is gone on enabling inline style for columns
    Vik Kumar Explorer
    Currently Being Moderated
    so how do i apply this skin to only table while keep using the standard skin for everything else?

    all example in docs i saw is replacing the existing css rather for a component.
  • 5. Re: row highlighting is gone on enabling inline style for columns
    AlejandroProfet Journeyer
    Currently Being Moderated
    To apply that css rules to only one table set property styleClass="MyCustomTable" of the <af:table> and change the above rules for these (note that each rule starts with af|table.MyCustomTable):
    af|table.MyCustomTable::status-message {background-color: #0090c1; color: white; border: 2px #a0b4ba inset;}
    af|table.MyCustomTable::column-resize-indicator {border: 1px solid #51bfff;}
    af|table.MyCustomTable::data-row:selected af|column::data-cell {border-top: 1px solid #00afea; border-bottom: 1px solid #00afea;}
    af|table.MyCustomTable::data-row:selected af|column::banded-data-cell {border-top: 1px solid orange; border-bottom: 1px solid orange;}
    af|table.MyCustomTable::data-row:selected:focused af|column::data-cell {border-top: 1px dashed #00afea; border-bottom: 1px dashed #00afea;}
    af|table.MyCustomTable::data-row:selected:focused af|column::banded-data-cell {border-top: 1px dashed orange; border-bottom: 1px dashed orange;}
    af|table.MyCustomTable::data-row:selected:inactive af|column::data-cell {border-top: 1px solid #84e0ff; border-bottom: 1px solid #84e0ff;}
    af|table.MyCustomTable::data-row:selected:inactive af|column::banded-data-cell {border-top: 1px solid green; border-bottom: 1px solid green;}
    af|table.MyCustomTable::data-row:hover af|column::data-cell,af|table.MyCustomTable::data-row:hover af|column::banded-data-cell {background-color: #bfd6b0 !important;}
    af|table.MyCustomTable af|column::data-cell:selected {background-color: #9CACC9 !important;}
    AP
  • 6. Re: row highlighting is gone on enabling inline style for columns
    Vik Kumar Explorer
    Currently Being Moderated
    does it need to add the entry of this skin still in the trinidad-config.xml ?
  • 7. Re: row highlighting is gone on enabling inline style for columns
    AlejandroProfet Journeyer
    Currently Being Moderated
    See this Luc's article: http://lucbors.blogspot.com.es/2010/07/adf-11g-skinning-three-ways-to-change.html

    AP

Legend

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