Dirty selected cells do not show the red triangle for 'dirty' - simple fix

[tiberiuspv]

If you're in batch mode edition, there is a minor CSS bug. Dirty cells carry a red triangle in the upper left corner. Selected cells get colored in a blue-grey (#d8e8fa) [I am using the Office PQGrid theme and the Redmond JQueryUI theme].
When a cell is selected and dirty, the red triangle does not show up. It took me a little bit of time to go through the 4 CSS files involved (baseline & theme for both JQUeryUI and PQGrid), but it turns out there is a simple fix.

Office/pqgrid.css contains a rule:
    .pq-state-select{
        background:#d8e8fa !important;   
    }

This needs to be replaced by
    .ui-state-highlight.pq-state-select{
        background:#d8e8fa;   
    }

because !important overrides the div.pq-grid td.pq-cell-dirty rule in pqgrid.dev.css.

I think the reason you used !important is because the pq-state-select rule was overriden by JQueryUI due to specificity rules. The problem JQueryUI rule has the selector
    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
and is in jquery-ui.css.
The way I wrote it provides higher specificity than the JQUeryUI rule, and works because (as far as I can see) PQGrid always sets ui-state-highlight when it sets pq-state-select.
Note that you need to use background, not background-color otherwise the colored background image from that JQueryUI rule trumps the background-color. (sigh...).

This fix has the further advantage that hovering over a selected cell changes its color to a mid-grey (I did not spend the time to figure out which rule produces that effect).

This was a good way for me to get a good grasp of the CSS rules, which are pretty tricky.

Thanks for an excellent product.

[tiberiuspv]

Well, turns out there were a few more worms under that rock...

With my fix, hovering over a dirty cell results in the red triangle disappearing while you are hovering. Not satisfactory.
After a bit more debugging, it appears that the underlying issue is the technique JQueryUI uses of using background images for coloring. My (rather inelegant) solution is to also add to the Office PQGrid theme the following two rules:

        div.pq-grid tr td.pq-grid-cell-hover.ui-state-hover
        {
            background:#efefef;    /* also gets rid of the JQueryUI background image */
            border-width:0;
        }
        div.pq-grid tr td.pq-cell-dirty.pq-grid-cell-hover.ui-state-hover
        {
            background-color:#efefef;
            background-image:url("images/square_dirty.gif");  /* change the file path if adding this to your HTML file */
            background-repeat:no-repeat;   
            background-position: left top;
            border-width:0;
        }

The double qualification (PQ and UI hover) provides a higher priority than the JQueryUI rules.
The inelegant part is having the conjoined 'hover & dirty' rule since it is against the general CSS philosophy of avoiding conjoined rules.
But, as far as I can tell, it provides what (I think) was the design intent of the Office theme:
    - hover on a cell results in light grey, including if that cell is currently selected
    - selected cells are light blue
    - the dirty flag (red upper left triangle) shows up irrespective of selection and hovering
Please note that the same general fix needs to be applied to the row-hover rules, which I have not done. I'll leave that to Paramvir since I don't use row hover ...
Also, I have tested this only in the context of JQuery Redmond theme plus ParamQuery Office theme, on up-to-date versions of IE and Chrome.
There may be more issues on other browsers and other theme combinations.

[paramvir]

Thanks for your detailed analysis & insight into conjoined rules and higher specificity, replacing !important with conjoined rule is a very good suggestion.

The following rules in the given order ( replacement of existing !important & descendant rules ) fix row/cell hover, cell selection & dirty cell styles.

.pq-state-select.ui-state-highlight{
    background:#d8e8fa;
    border-color: #d8e8fa;
}
.pq-grid-cell-hover.ui-state-hover, .pq-grid-row-hover.ui-state-hover > td{
    background:#efefef;   
}


These would be included in next version after more testing.

[tiberiuspv]

Thanks for your much better fix. Works in all the cases I played with.

I knew there had to be something cleaner than my approach.

This is my first web project, and I am still on a steep learning curve. So I often understand the issues, but don't have the experience to find the right solution...