JavaFX8: Problems with TreeView style - css

Question

I have this wierd problem when trying to CSS style a TreeView.
This TreeView is Filterable to show only the items which I'm looking for.
This is how it looks when the Tree is shown without any filtering
And here's how it looks like, when there's a filtering active
I wanted to have all expanded nodes to have a colored background (green in this example).
So I added a Stylesheet containing the following code
.search-tree .tree-cell:expanded {
-fx-background-color: green;
-fx-text-fill: white;
}
But as you can see, the empty cells in the 2nd image are still colored even there's no content in it.
I also checked the component with ScenicView and indeed the pseudoClassState is still 'expanded'.
Does anyone have a idea why this empty cell is still in this state?
Here's the sample code that I used:
import java.io.File;
import java.util.ArrayList;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TreeTest extends Application {
TreeView<Object> t;
private TextField searchField;
private TreeViewHelper helper;
#Override
public void start(Stage s) throws Exception {
helper = new TreeViewHelper();
t = new TreeView<>();
t.getStyleClass().add("search-tree");
TreeItem rootItem = new TreeItem("");
TreeItem cars = new TreeItem("Cars");
cars.getChildren().addAll(helper.getCars());
cars.setExpanded(true);
TreeItem buses = new TreeItem("Buses");
buses.getChildren().addAll(helper.getBuses());
buses.setExpanded(true);
rootItem.setExpanded(true);
rootItem.getChildren().add(cars);
rootItem.getChildren().add(buses);
t.setRoot(rootItem);
t.setShowRoot(false);
VBox root = new VBox();
root.getChildren().add(t);
searchField = new TextField();
searchField.textProperty().addListener(new ChangeListener<String>() {
#Override
public void changed(ObservableValue<? extends String> prop, String lastValue, String v) {
scanItems();
}
});
root.getChildren().add(searchField);
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(new File("style.css").toURI().toURL().toExternalForm());
s.setScene(scene);
s.show();
}
void scanItems()
{
t.getRoot().getChildren().clear();
TreeItem cars = new TreeItem("Cars");
helper.getCars().stream().filter(e -> e.getValue().toString().toLowerCase().contains(searchField.getText().toLowerCase()))
.forEach(item -> cars.getChildren().add(item));
t.getRoot().getChildren().add(cars);
cars.setExpanded(true);
TreeItem buses = new TreeItem("Buses");
helper.getBuses().stream().filter(e -> e.getValue().toString().toLowerCase().contains(searchField.getText().toLowerCase()))
.forEach(item -> buses.getChildren().add(item));
t.getRoot().getChildren().add(buses);
buses.setExpanded(true);
}
public static void main(String[] args) {
Application.launch( args );
}
class TreeViewHelper
{
public TreeViewHelper()
{
}
// This method creates an ArrayList of TreeItems (Products)
public ArrayList<TreeItem> getProducts()
{
ArrayList<TreeItem> products = new ArrayList<TreeItem>();
TreeItem cars = new TreeItem("Cars");
cars.getChildren().addAll(getCars());
cars.setExpanded(true);
TreeItem buses = new TreeItem("Buses");
buses.getChildren().addAll(getBuses());
buses.setExpanded(true);
products.add(cars);
products.add(buses);
return products;
}
// This method creates an ArrayList of TreeItems (Cars)
ArrayList<TreeItem> getCars()
{
ArrayList<TreeItem> cars = new ArrayList<TreeItem>();
TreeItem ferrari = new TreeItem("Ferrari");
TreeItem porsche = new TreeItem("Porsche");
TreeItem ford = new TreeItem("Ford");
TreeItem mercedes = new TreeItem("Mercedes");
cars.add(ferrari);
cars.add(porsche);
cars.add(ford);
cars.add(mercedes);
return cars;
}
// This method creates an ArrayList of TreeItems (Buses)
ArrayList<TreeItem> getBuses()
{
ArrayList<TreeItem> buses = new ArrayList<TreeItem>();
TreeItem gm = new TreeItem("GM");
TreeItem vw = new TreeItem("VW");
TreeItem man = new TreeItem("MAN");
TreeItem volvo = new TreeItem("Volvo");
buses.add(gm);
buses.add(man);
buses.add(volvo);
buses.add(vw);
return buses;
}
}
}
Edit: I have this issue on MacOSX 10.11 using Java 1.8.0_77b3

Answer 1

I think I found a solution.
By simply adding following style and defining the empty state
.search-tree .tree-cell:empty {
-fx-background-color: transparent;
-fx-text-fill: white;
}
it was working as expected.