JavaFX TreeTableView Css for unfocused selected line

Question

I have a problem with CSS on TreeTableView.

For TableView when I define CSS like this :

.table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

The selected rows have text in white even if I click out of the table

For TreeTableView I have defined CSS like this :

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

The selected rows have text in white but when I click out of the table the text change to black

Does someone know how can I solve this ?

Thank you

Answer 1

Try setting the text fill on the cells themselves, instead of the row cells:

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
    -fx-text-fill: white;
}

You probably also want

.tree-table-row-cell:selected .tree-disclosure-node .arrow {
    -fx-background-color: white ;
}

---

For a slightly different approach:

The default behavior of the modena stylesheet is to set the text fill to a "looked up color" called -fx-text-background-color. This is set to a "ladder", which is a function based on the value of another looked-up color called -fx-background. The background color of the rows and cells is defined in terms of -fx-background.

The way the "ladder" works is if the intensity of -fx-background is less than 45%, the ladder evaluates to -fx-light-text-color (white), between 46% and 59% it evaluates to -fx-dark-text-color (black) and above that to -fx-mid-text-color (grey).

So typically, you can simply change -fx-background (instead of -fx-background-color) and the text will change to something appropriate:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

In your case, this won't quite give you what you want. The color you chose as the background isn't dark enough to trigger the light text color; the intensity is about 58%, so it evaluates to black.

If you use a darker background, say #d1531f, then you see the white text with no additional changes.

You can fix this by adjusting the ladder itself so the intensity thresholds are different:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: ladder(
        -fx-background,
        -fx-light-text-color 60%,
        -fx-dark-text-color  61%,
        -fx-dark-text-color  69%,
        -fx-mid-text-color   70%
    );
}

or perhaps just by bypassing the ladder entirely and setting -fx-text-background-color directly to the light text color:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: -fx-light-text-color;
}

This is more complex (perhaps) but is more in the style of the default CSS. It works with the cells without explicitly having to change the CSS for those (basically, looked-up colors are inherited), and the disclosure arrow automatically has the same color as the text.