7 Replies Latest reply: Nov 16, 2012 12:46 PM by Vik Kumar RSS

    row highlighting is gone on enabling inline style for columns

    Vik Kumar
      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-Oracle
          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
            Alejandro Profet
            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
              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
                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
                  Alejandro Profet
                  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
                    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
                      Alejandro Profet
                      See this Luc's article: http://lucbors.blogspot.com.es/2010/07/adf-11g-skinning-three-ways-to-change.html

                      AP