Alternating row color with selection mixin not showing selection for odd rows

[schallm]

I am trying to get alternating row colors working with the selection extension.

Here is an example: http://plnkr.co/edit/Bb30hFxBVHhJIBMyICqs?p=info

I found a link here suggesting the way to do this is with a .dgrid-row-odd:

.dgrid-row-odd {
    background: #F2F5F9;
}

However if you are using a skin (i.e. claro) the coloring does not have enough specificity due to a rule in the claro.css file:

.claro .dgrid-row {
    background: #fff url("images/row_back.png") repeat-x;
    ... 
}

This can be resolve by adding your skin name to the rule above:

.claro .dgrid-row-odd {
    background: #F2F5F9;
}

This however causes issues if you are using the selection mixin. The rule for selection background color is defined in the claro.css at the same specificity of the the alternating row color.

.claro .dgrid-selected {
  background-color: #cee6fa;
}

Since the alternating row color is defined later in the document in site specific code, it wins causing selected odd rows that are not being hovered to not show as selected.

A potential fix is to add !important to the selected rules in the claro.styl file.

$dgrid-selected-background-color ?= #cee6fa !important;
$dgrid-selected-hover-background-color ?= #9bc6f2 !important;

[kfranqueiro]

!important would almost certainly cause headaches elsewhere when customizing.

In your actual application, are you trying to override this with CSS or Stylus? I can see where this could be troublesome with CSS (at least, without defining your own selected style as well), but with Stylus it should be super straightforward to override in your own skin:

$dgrid-body-row-odd-background ?= #f7f7f7;
@import 'path/to/dgrid/css/skins/claro';

[schallm]

I'm trying to override in CSS as the rest of our project doesn't use Stylus. I can fix the issue since we have a custom skin, but it would be nice to not require other developers to create a skin just to make this common scenario work.

I know !important is usually a bad thing especially for libraries (Mozilla).

How about upping the specificity for the rule within the claro.css (potentially other skins as well)? Any additional selector will make this work.

.claro .dgrid .dgrid-selected {
  background-color: #cee6fa;
}

This gets rid of the important and allows developers to add the following rule without having to have their own skin.

.claro .dgrid-row-odd {
    background: #F2F5F9;
}