I am trying to have round edges, so I tried to look around and found these answers:
https://www.reddit.com/r/JavaFX/comments/tlnhfl/rounded_edges_for_textarea_within_a_scrollpane/
JavaFX ScrollPane border and background
How to set rounded corners to TextArea in JavaFX?
but for some reason non of them are actually working for me.
Here is the fxml file that I am using:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<VBox id="collection" prefHeight="500.0" prefWidth="200.0" stylesheets="@/client/stylesheets/Global.css" xmlns="http://javafx.com/javafx/11.0.14-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="client.scenes.CollectionOverviewCtrl">
<HBox alignment="CENTER" spacing="5">
<Label id="collection_name" text="Collection name" />
<Button styleClass="imageButton" id="delete_button" mnemonicParsing="false" text="X"/>
</HBox>
<ScrollPane id="containerContainer" fitToHeight="true" prefWidth="200" VBox.vgrow="ALWAYS">
<VBox id="container" fx:id="container"/>
</ScrollPane>
<Button styleClass="imageButton" mnemonicParsing="false" text="Add Card" />
</VBox>
And this is the css file that I am using:
#collection{
-fx-background-color: #6096B4;
-fx-spacing: 25;
-fx-alignment: CENTER;
-fx-padding: 5 5 5 5;
}
#collection_name{
-fx-font-size: 16px;
}
#delete_button{
-fx-font-size: 10px;
-fx-background-color: #FF0000;
-fx-text-fill: white;
}
#containerContainer{
-fx-border-radius: 50 50 50 50;
-fx-border-color: #1526b0;
-fx-background-color: #0b9c12;
-fx-background-radius: 50 50 50 50;
}
#container{
-fx-background-color: #9c0b0b;
-fx-background-radius: 50 50 50 50;
}
And here is what I am getting as a result:
You can see that it did give it round edges, but no matter what I do, I can't get rid of the white rectangle that is blocking them. What do I need to change for it to work?