CODEWITHSUNDEEP
javacssjavafxbackgroundaccordion
piggy
piggy

Reputation: 47

Modify JavaFX Accordion

I have an Accordion with two TitlePane's inside and I had a design question. I wanted to see if there was any way to remove the border around the title that you can see here:

Titled Pane

Here is the CSS Code I have:

.accordion .titled-pane .title {
    -fx-background-color: transparent;
    -fx-padding: 0.3333em 0.75em 0.3333em -0.5em;
}

}
.accordion .titled-pane>*.content {
    -fx-background-color: transparent;
    -fx-padding: 0em 0.75em 0em 2em;
}

.accordion .titled-pane>.title>.arrow-button>.arrow {
    -fx-background-color: transparent;
}

Upvotes: 2

Views: 1603

Answers (2)

Slaw
Slaw

Reputation: 45916

Here's where modena.css, at least in JavaFX 13, adds the border you're seeing:

.accordion > .titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-15%) 95%,
        derive(-fx-color,-25%) 100%
        ),
        -fx-inner-border,
        -fx-body-color;
    -fx-background-insets: -1 0 0 0, 0 1 1 1, 1 2 2 2;
    -fx-background-radius: 0, 0, 0;
}

This "border" is implemented using three background colors, each one slightly more inset than the previous one. To remove the border you just have to use:

.accordion > .titled-pane > .title {
    -fx-background-color: null;
}

Here's an example using the above CSS (assumed to be in a file named Main.css):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

  @Override
  public void start(Stage primaryStage) {
    Accordion accordion = new Accordion(
        new TitledPane("TitledPane #1", new StackPane(new Label("Content #1"))),
        new TitledPane("TitledPane #2", new StackPane(new Label("Content #2")))
    );

    Scene scene = new Scene(accordion, 400, 200);
    scene.getStylesheets().add(getClass().getResource("/Main.css").toString());

    primaryStage.setScene(scene);
    primaryStage.setTitle("JavaFX " + System.getProperty("javafx.version"));
    primaryStage.show();
  }
}

And here's screenshots of the result running on Java 8u232 (Zulu Community):

(collapsed):

screenshot-collapsed titled panes

(expanded):

screenshot-expanded titled pane

You'll notice in the screenshot with the expanded TitledPane there's a border around the content. This is added by modena.css as well. If desired, that too can be removed with the following CSS:

.titled-pane > *.content {
  -fx-background-color: null;
  -fx-border-color: null;
}

Upvotes: 2

piggy
piggy

Reputation: 47

After messing around I was finally able to find the answer was:

.titled-pane .title {
    -fx-border-color: null;
}

Upvotes: 0

Related Questions