CODEWITHSUNDEEP
javajavafxjavafx-css
user5885550
user5885550

Reputation:

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

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

Upvotes: 0

Views: 415

Answers (1)

Slaw
Slaw

Reputation: 46070

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:

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 Labels and Text specifically from within the CSS file. You could give your Labels a 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 (i.e. .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).

Upvotes: 2

Related Questions