Datatable Selected Row Border Style

[bumble.bee]

Some of the themes such as Sunny use border color changes to indicate row selection in a dataTable. This simply doesn't work well because the dataTable rows have shared borders and the top border of the selected row will not render with the selected row border color (only three sides of the selected row rectangle have the selected row color). I've discussed this before here: http://primefaces.prime.com.tr/forum/vi ... 388#p23416.

The workaround of making the selected row border two pixels wide takes advantage of the fact that the row with the wider border settings takes precedence in a shared border situation (http://www.w3.org/TR/CSS21/tables.html# ... resolution). However, this workaround has the side-effect of a "shaky table" (the table size changes as rows are highlighted).

An alternate workaround, which removes the "shaky table" effect, is to not collapse the borders. This makes the table borders thicker in general though.

Code: Select all

.ui-datatable table { 
  border-collapse: separate; 
  border-space: 0;
}

The best solution is probably going to be to change the themes which rely on border color for highlighting to use background color instead.

[bumble.bee]

Here are two other workarounds: "border-style exploit" and "border-bottom exploit"; unfortunately both of which require modifying the theme's stylesheet.

The "border-style exploit" takes advantage of the fact that solid borders take precedence over inset borders and that inset borders look just like solid borders at 1px wide. The idea is to set the table, row, and cell borders to 1 pixel wide with an inset border. Then update the ui-state-highlight and ui-state-error styles to set the border style to a 1 pixel wide solid border.

The "border-bottom exploit" takes advantage of the fact that borders of otherwise equal precedence render from left-to-right and top-to-bottom with upper and left taking precedence and that border none has the lowest precedence. The idea is to set border-bottom: none; for row and cell borders. This means the top border of the row below is used. Then the ui-state-hightlight and ui-state-error styles must set the border-bottom to 1px solid <theme color>. If you could get the precedence rules just right such that you set the border-bottom to none for all rows/cells without overriding the ui-state-hightlight/ui-state-error styles then you wouldn't have to modify the theme's stylesheet.

[bumble.bee]

Here is the changes required to implement the "bottom-border exploit" for the theme Sunny (theme.css):

Code: Select all

.ui-datatable .ui-datatable-data .ui-state-highlight td {
    border-bottom: 1px solid #eeb420;
}

.ui-datatable .ui-datatable-data .ui-state-error td {
    border-bottom: 1px solid #ffb73d;
}

Then in your own stylesheet add:

Code: Select all

.ui-datatable .ui-datatable-data tr td {
    border-bottom: none;
}

Note: instead of a adding a new rule in your own stylesheet, you could modify the datatable.css file in PrimeFaces and add border-bottom: none; to the rule ".ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td". Also notice that the reason you have to use cells (td element) in your selectors is because datatable.css does and cells have the highest precedence so the only way to override is to include cells in your own selectors as well. Finally, the ui-state-error rule in the theme.css file is actually not needed since datatables don't currently use it (I think they originally used it for validation errors, but no more).

[bumble.bee]

Created an issue ticket:

http://code.google.com/p/primefaces/iss ... il?id=2154