I have simple form which has Accordion container with 2 elements.
I want to remove or modify the Accordion default borders.
My FXMLDocument.fxml
file:
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" styleClass="form" stylesheets="@styles.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/10.0.1">
<children>
<Accordion layoutX="100.0" layoutY="75.0" prefHeight="250.0" prefWidth="400.0">
<panes>
<TitledPane styleClass="acc-titled-pane" text="Option 1">
<content>
<AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
</AnchorPane>
</content>
</TitledPane>
<TitledPane styleClass="acc-titled-pane" text="Option 2">
<content>
<AnchorPane prefHeight="180.0" prefWidth="200.0" styleClass="acc-pane-body">
</AnchorPane>
</content>
</TitledPane>
</panes>
</Accordion>
</children>
</AnchorPane>
My styles.css
file:
.form {
-fx-background-color: lightgreen;
}
.acc-titled-pane {
-fx-border-color: transparent;
}
.acc-pane-body {
-fx-background-color: lightgreen;
-fx-border-color: transparent;
}
As you can see, I made all borders transparent, but there are still some borders: I have tried a lot of css rules, but none of them worked for me.
First of all You should style the .content
subclass of TitledPane (docs).
Additionally you should set -fx-border-width
instead of -fx-border-color
because even transparent will result in the parents background shining through:
If you set the border width of the content subclass to 0
it should solve your problem:
.acc-titled-pane .content {
-fx-border-width: 0;
}
The result will be: