I cannot set “-fx-text-fill: white” to external css to style Text nested in a GridPane nested in an Accordion in JavaFX

Question

I have been searching the internet and asking many for help with this problem. I am trying to set the "-fx-text-fill" for a Text component nested within a Girdpane, nested within a TitledPane, nested within an accordion for Javafx. I want to style the text (and other things such as a label component) as the accordion is a dynamically updated list. Nothing I do works.

I have tried editing the style sheet by using: text.setStyle(); and I have tried adding css to the css file which is properly linked.

Java code for populating the accordion:

private void populateAccordion(){
        final String[] imageNames = new String[]{"Discord 1", "Discord 2", "Discord 3"};
        final TitledPane[] tps = new TitledPane[imageNames.length];
        for (int i = 0; i < imageNames.length; i++) {
            GridPane grid = new GridPane();
            grid.setVgap(4);
            grid.setPadding(new Insets(5, 5, 5, 5));
            Text infractions = new Text("Infractions: ");
            Text zero = new Text("0");
            zero.setStyle("-fx-text-fill: white");
            grid.add(infractions, 0, 0);
            grid.add(zero, 1, 0);
            grid.add(new Label("Cc: "), 0, 1);
            grid.add(new TextField(), 1, 1);
            grid.add(new Label("Subject: "), 0, 2);
            grid.add(new TextField(), 1, 2);
            System.out.println("Printing css of grid");
            grid.getStyleClass().forEach(System.out::println);
            System.out.println("All done!");
            tps[i] = new TitledPane(imageNames[i],grid);
            tps[i].getChildrenUnmodifiable().forEach(child -> {
                System.out.print(child.getId());
            });
        }

Css code for styling the text in the accordion:

.accordion > .titled-pane > .content >  GridPane{
    -fx-text-fill: white;
}

.scroll-pane > .accordion > .titled-pane > .content > GridPane{
    -fx-text-fill: white;
}

.titled-pane > .content > GridPane{
    -fx-text-fill: white;
}

Result: https://gyazo.com/225a65f0123e82a3b6e818d47afc760c

Expected result: the text for: "infractions: 0", "cc", and "subject" should be white I am wondering if there is a site dedicated to showing the structure of JavaFX elements so I can easily see the structure of these elements and style them accordingly. I have tried following this site: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#labeled As well as the modena.css that is used by default: https://gist.githubusercontent.com/maxd/63691840fc372f22f470/raw/e526d5c54bd145c58409ad3a2b8acb77d90dcbe5/modena.css

Answer 1

The first problem is your infractions and zero are a Text , not a Label . If you take a look at the JavaFX CSS Reference Guide , you'll see the -fx-text-fill property is defined for:

• Labeled
• TextInputControl

A Text node is neither a Labeled nor a TextInputControl . The CSS documentation doesn't seem to make this clear, but Text extends from Shape and thus has the properties of Shape . To change the text color of a Text node you should use -fx-fill . Alternatively, you could call text.setFill(...) in Java code.

I also believe you need to target the Label s and Text specifically from within the CSS file. You could give your Label sa unique style class, same with the Text , and use that from the style sheet. Something like:

.white-label {
    -fx-text-fill: white;
}

.white-text {
    -fx-till: white;
}

Adding a style class looks like:

label.getStyleClass().add("white-label");
text.getStyleClass().add("white-text");

If needed, you can still make the selection more specific (ie .titled-pane > .content > etc... ).

---

Regarding your question about tool(s) to view the scene graph structure, once such tool is Scenic View . Make sure you download the correct version to use with your version of Java. You can also use the CSS Analyzer of Scene Builder . To show the analyzer, go to "View" → "Show CSS Analyzer" (or Ctrl + 6 on Windows).