kotlinjavafxtornadofx

Styling background of TornadoFX ListView

Is it possible to style a ListView component so that none of the elements have a shaded background?

I.e not like this:

Image showing the default behaviour, that I do not want

But instead have them all styled like the first, third, fifth item etc.

TIA

Solution

  • In the default stylesheet, modena.css the background color for ListCells is governed by the following lines of code:

    .list-cell,
.tree-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-background;
    -fx-text-fill: -fx-text-background-color;
}

/* ... */

.list-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

    So to remove the alternative color for the odd-numbered cells (note that counting is zero-indexed, so the odd-numbered cells are the 2nd, 4th, etc in the list view), you just need to include the following in your external CSS file, to revert the color for the odd-numbered cells to the same as the even-numbered cells:

    .list-cell:odd {
    -fx-background: -fx-control-inner-background ;
}

    If you need to apply this to one specific ListView, you can set an id on that ListView:

    ListView myListView ;
// ...

myListView.setId("plain-list-view");

    and then the CSS selector becomes

    #plain-list-view .list-cell:odd {
    -fx-background: -fx-control-inner-background ;
}