Here is the image of the frame. I have highlighted the corners that i want to make transparent.
I am facing the issue in making the corners colors of the table transparent. I don't why it is not changing because i have also changed the background color of the table header and table view.
Here is my FXML Code:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.cell.PropertyValueFactory?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/17.0.6"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.al_makkah_traders_app.controller.DashBoardController">
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="Bills">
<items>
<MenuItem mnemonicParsing="false" onAction="#walkInBillMenuItem" text="Walk In Bill"/>
<MenuItem mnemonicParsing="false" onAction="#accountHolderBillMenuItem"
text="Account Holder Bill"/>
<MenuItem mnemonicParsing="false" onAction="#emptyBillMenuItem" text="Empty Bill"/>
</items>
</Menu>
<Menu mnemonicParsing="false" text="Stock">
<items>
<MenuItem mnemonicParsing="false" onAction="#onAddNewProductMenuItem" text="Add New Product"/>
<MenuItem mnemonicParsing="false" onAction="#onPurchaseRequestMenuItem"
text="Purchase Request"/>
<MenuItem mnemonicParsing="false" onAction="#onStockArrivalMenuItem" text="Stock Arrival"/>
<MenuItem mnemonicParsing="false" onAction="#onStockTransferMenuItem" text="Stock Transfer"/>
</items>
</Menu>
<Menu mnemonicParsing="false" text="Accounts">
<items>
<MenuItem mnemonicParsing="false" onAction="#onAddAccountHolderMenuItem"
text="Add Account Holder"/>
<MenuItem mnemonicParsing="false" text="Account Holder's Transactions"/>
<MenuItem mnemonicParsing="false" onAction="#onAddNewCompanyAccount" text="Company Accounts"/>
<MenuItem mnemonicParsing="false" text="Company Transactions"/>
</items>
</Menu>
<Menu mnemonicParsing="false" text="Reports">
<items>
<MenuItem mnemonicParsing="false" text="Daily Report"/>
</items>
</Menu>
<Menu mnemonicParsing="false" text="About">
<items>
<MenuItem mnemonicParsing="false" text="About"/>
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<VBox alignment="CENTER" styleClass="left-form" stylesheets="@../stylesheets/style.css"
BorderPane.alignment="CENTER">
<children>
<Label alignment="CENTER" contentDisplay="CENTER" text="Al-Makkah Traders" textFill="WHITE">
<font>
<Font name="Berlin Sans FB Demi Bold" size="40.0"/>
</font>
<padding>
<Insets bottom="10.0" top="10.0"/>
</padding>
</Label>
<GridPane alignment="CENTER" hgap="30.0" styleClass="right-form" stylesheets="@../stylesheets/style.css"
vgap="10.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS"/>
<ColumnConstraints hgrow="ALWAYS"/>
</columnConstraints>
<rowConstraints>
<RowConstraints/>
<RowConstraints vgrow="ALWAYS"/>
<RowConstraints/>
<RowConstraints vgrow="ALWAYS"/>
</rowConstraints>
<children>
<Label text="Sales Logs" textFill="#14b8a6" GridPane.rowIndex="2">
<font>
<Font name="System Bold" size="25.0"/>
</font>
</Label>
<TableView fx:id="salesTableView" styleClass="right-form"
stylesheets="@../stylesheets/style.css" GridPane.columnSpan="2"
GridPane.rowIndex="3">
<columns>
<TableColumn fx:id="productColumn" text="Product">
<cellValueFactory>
<PropertyValueFactory property="product"/>
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="quantityColumn" text="Quantity">
<cellValueFactory>
<PropertyValueFactory property="quantity"/>
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="accountHolderColumn" text="Account Holder">
<cellValueFactory>
<PropertyValueFactory property="accountHolder"/>
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="paymentModeColumn" text="Payment Type">
<cellValueFactory>
<PropertyValueFactory property="paymentType"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Amount">
<cellValueFactory>
<PropertyValueFactory property="amount"/>
</cellValueFactory>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
</columnResizePolicy>
</TableView>
<Label text="Online Payments" textFill="#14b8a6" GridPane.columnIndex="1">
<font>
<Font name="System Bold" size="22.0"/>
</font>
</Label>
<TableView fx:id="onlinePaymentsTableView" GridPane.columnIndex="1" GridPane.rowIndex="1">
<columns>
<TableColumn text="Payment Mode">
<cellValueFactory>
<PropertyValueFactory property="paymentMode"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Account Holder">
<cellValueFactory>
<PropertyValueFactory property="accountHolder"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Account No">
<cellValueFactory>
<PropertyValueFactory property="accountNo"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Amount">
<cellValueFactory>
<PropertyValueFactory property="amount"/>
</cellValueFactory>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
</columnResizePolicy>
</TableView>
<Label text="Stock Arrivals" textFill="#14b8a6">
<font>
<Font name="System Bold" size="22.0"/>
</font>
</Label>
<TableView fx:id="stockArrivalsTableView" GridPane.rowIndex="1">
<columns>
<TableColumn text="Date">
<cellValueFactory>
<PropertyValueFactory property="date"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Product Name">
<cellValueFactory>
<PropertyValueFactory property="productName"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="Quantity">
<cellValueFactory>
<PropertyValueFactory property="quantity"/>
</cellValueFactory>
</TableColumn>
<TableColumn text="History">
<cellValueFactory>
<PropertyValueFactory property="history"/>
</cellValueFactory>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
</columnResizePolicy>
</TableView>
</children>
<padding>
<Insets bottom="30.0" left="30.0" right="30.0" top="10.0"/>
</padding>
<VBox.margin>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
</VBox.margin>
</GridPane>
</children>
<BorderPane.margin>
<Insets/>
</BorderPane.margin>
</VBox>
</center>
</BorderPane>
and this is my stylesheet file code:
.label {
-fx-text: #fff;
}
.panel-view {
-fx-background-color: #fff;
-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.4), 10, 0, 0, 0);
-fx-background-radius: 10px;
}
.button {
-fx-background-color: #14b8a6;
-fx-background-radius: 10px;
-fx-cursor: hand;
-fx-font-size: 14px; /* Add 'px' unit to font size */
-fx-text-fill: #fff;
}
.left-form {
-fx-padding: 10px;
-fx-background-color: #14b8a6;
}
.login-right-panel {
-fx-padding: 20px;
-fx-background-color: #fff;
-fx-border-color: #000;
-fx-border-width:.4px .4px .4px 0px;
}
.login-left-form{
-fx-padding: 10px;
-fx-background-color:linear-gradient(to bottom right, #449d6b, #633364);
-fx-border-color:#000;
-fx-border-width:.4px 0px .4px .4px;
}
.right-form {
-fx-padding: 20px 40px 40px 40px;
-fx-background-color: #fff;
-fx-background-radius: 10px;
}
.text-field {
-fx-border-color: #3e3d3d;
-fx-border-width: 0.5px;
-fx-border-radius: 4px;
-fx-font-family: "Tahoma";
-fx-font-size: 13px; /* Add 'px' unit to font size */
}
.text-field:focused {
-fx-border-color:linear-gradient(to bottom right, #449d6b, #633364);
-fx-border-radius: 4px;
-fx-border-width: 1.5;
}
.login-button {
-fx-background-radius: 15px;
-fx-cursor: hand;
-fx-font-size: 14px; /* Add 'px' unit to font size */
-fx-text-fill: #fff;
-fx-font-family: "SansSerif";
-fx-background-color:linear-gradient(to bottom right, #449d6b, #633364);
}
.combo-box {
-fx-background-color: #fff;
-fx-font-size: 11;
-fx-border-color: #3e3d3d;
-fx-border-width: 0.8;
-fx-border-radius: 4px;
}
.combo-box:focused {
-fx-border-color: #14b8a6;
-fx-border-radius: 4px;
-fx-border-width: 1.5;
}
.table-view {
-fx-background-color: transparent;
-fx-padding: 0px;
-fx-border-color: linear-gradient(to bottom right, #449d6b, #633364);
-fx-border-width: 2px;
-fx-border-radius: 8px;
}
.table-view .table-column {
-fx-alignment: CENTER;
}
.table-view .column-header-background {
-fx-background-color: linear-gradient(to bottom right, #449d6b, #633364);
-fx-background-radius: 8px 8px 0px 0px;
}
.table-view .column-header, .filter {
-fx-background-color: transparent;
-fx-font-size: 13px;
-fx-size: 30px;
}
.table-view .column-header .label {
-fx-text-fill: #fff;
}
I solved this problem by using this property in the css file.
.table-view .column-header {
-fx-background-color: transparent;
}