CODEWITHSUNDEEP
javajavafx
KunLun
KunLun

Reputation: 3225

JavaFX TitledPane double border using css file

I have this code:

public void start(Stage primaryStage){

    TitledPane titledPane = new TitledPane("TITLE", null);
    titledPane.setContent(new javafx.scene.control.TextArea("Batman"));

    Scene scene = new Scene(titledPane);
    scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();

}

style.css:

.titled-pane .title,
.titled-pane .content{
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

And the result is:

I don't understand why appear 2 borders.

If I remove style.css and use setStyle:

public void start(Stage primaryStage){

    TitledPane titledPane = new TitledPane("TITLE", null);
    titledPane.setContent(new javafx.scene.control.TextArea("Batman"));

    Platform.runLater(() -> {

        titledPane.lookup(".title").setStyle("-fx-background-color: white;" +
                                                        "-fx-border-style: solid;" +
                                                        "-fx-border-color: black;" +
                                                        "-fx-border-width: 1px;");

        titledPane.lookup(".content").setStyle("-fx-background-color: white;" +
                                                        "-fx-border-style: solid;" +
                                                        "-fx-border-color: black;" +
                                                        "-fx-border-width: 1px;");

    });

    Scene scene = new Scene(titledPane);
    //scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();

}

Now looks good:

Why using css file the result is different?

Upvotes: 1

Views: 387

Answers (1)

KunLun
KunLun

Reputation: 3225

I found the problem. It was at css

.titled-pane .title,
.titled-pane .content{
   ...
}

This .titled-pane .content select all sub-nodes content of titled-pane, even sub-nodes of sub-nodes of titled-pane

Structure of this titledPane.setContent(new javafx.scene.control.TextArea("Batman")); is:

TitledPane -> title
           -> content = TextArea -> scroll-pane -> content

So my css change both content, which result in adding border to scroll-pane -> content

To modify only direct sub-nodes titledpane -> title and titledpane-> title, I need to use >:

.titled-pane > .title,
.titled-pane > .content{
   ...
}

Upvotes: 1

Related Questions