3

On JavaFX2.2, I created my own style class to represent table cells that contain invalid data. But my style class seems unable to override -fx-text-fill in the hover, selected, and focused states. Here is my style class:

.invalid-table-cell {
    -fx-text-fill: red;
}

.invalid-table-cell:hover {
    -fx-background-color: salmon;
    -fx-text-fill: blue;  /* No worky */
}

.invalid-table-cell:selected {
    -fx-background-color: purple;
    -fx-text-fill: orchid;  /* No worky */
}

.invalid-table-cell:focused:hover {
    -fx-background-color: red;
    -fx-text-fill: green;  /* No worky */
}

When my app runs, I can see changes in -fx-background-color, but I see no changes in -fx-text-fill in any of the special states.

What am I doing wrong?

davidrmcharles
  • 1,923
  • 2
  • 20
  • 33

2 Answers2

1

!important is likely required due to the specificity of your css rules versus the css rules of the default caspian or modena stylesheets (though my css skills are limited in terms of evaluating this).

SceneBuilder 1.1 has a css analyzer that can help determine what css rules and attributes are being activated. That may help in debugging css rule activation in general, though it is not much help in this specific case unfortunately as you can't set the styles on table cells through SceneBuilder 1.1.

One work-around is to copy all of the table-view css rules from the modena or caspian css (unfortunately there is a lot of them) and place the rules in your user stylesheet. Prepend the style selection element .invalid-table-cell to each of the table css rules in your user stylesheet and modify the rules as appropriate to achieve your desired look and feel. This will ensure that your ruleset has the correct level of specificity to override the default rules. It is unfortunately, a pretty arduous process and perhaps your !important overrides might be a better solution for you.

A slightly easier way to customize styles is to override predefined constants, for example something like below (which I haven't tried and just demonstrates a principle as the exact selector and rules needed may differ):

.invalid-table-cell {
    -fx-selection-bar-text: goldenrod;
}

As much of the default table cell styles are defined using -fx-text-fill: -fx-selection-bar-text;, just setting this value to the appropriate value allows you to override all of those default table cell styles. But it overrides them all to the same value, so if you need different values for different css psuedo-states like in your question, then you will need to define those rules explicitly as outlined earlier.

jewelsea
  • 150,031
  • 14
  • 366
  • 406
  • Thank you. Insufficient specificity in my CSS rules was my problem. I am updating my question with the actual, concrete solution now. – davidrmcharles Aug 23 '13 at 17:32
0

Following jewelsea's advice, I increased the specificity of my CSS rules to match the specificity of the corresponding rules in capsian.css. Because I was curious, I increased the specificity of my own rules incrementally and discovered that anything less specific than the following rules does not work in my situation.

.table-view:cell-selection .table-row-cell:filled .invalid-table-cell:hover {
    /* Works! */
}

.table-view:focused .table-row-cell:filled .invalid-table-cell:selected:focused {
    /* Works! */
}

.table-view:focused .table-row-cell:filled .invalid-table-cell:focused:selected:hover {
    /* Works! */
}
davidrmcharles
  • 1,923
  • 2
  • 20
  • 33