CODEWITHSUNDEEP
cssjavafx
sharkguy95
sharkguy95

Reputation: 21

JavaFX - setStyle() changes not showing

I am creating a JavaFX application and I am having problems changing the background colors for certain components. For the buttons I am able to change their background radius, but not their background color. For the TableView I am unable to change the background color as well.

Here is my code and a picture of what I am seeing.

import javafx.geometry.Pos;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableView;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class HomeUI extends Application {
    private TableView transactionTable = new TableView();
    private Button importButton = new Button("Import");
    private Button trendButton = new Button("Trends");
    private Button transactionButton = new Button("Transactions");

    public static void main(String[] args){
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        // Set the text of defined fields
        primaryStage.setTitle(" Budget Tracker");
        // Import button information

        // Create Anchor pane
        AnchorPane anchorPane = new AnchorPane();
        anchorPane.setPrefHeight(668.0);
        anchorPane.setPrefWidth(1112.0);
        anchorPane.setStyle("-fx-background-color: #545e75;");

        // VBox to hold all buttons
        VBox vBox = new VBox();
        vBox.setPrefWidth(195);
        vBox.setPrefHeight(668);
        vBox.prefHeight(668);
        vBox.prefWidth(203);
        vBox.setStyle("-fx-background-color: #82a0bc;");
        vBox.setLayoutX(0);
        vBox.setLayoutY(0);
        vBox.setAlignment(Pos.CENTER);

        // importButton settings
        importButton.setMnemonicParsing(false);
        importButton.setPrefWidth(300);
        importButton.setPrefHeight(80);
        importButton.setStyle("-fx-background-color: #cacC9cc");
        importButton.setStyle("-fx-background-radius: 0;");

        // trendButton settings
        trendButton.setPrefWidth(300);
        trendButton.setPrefHeight(80);
        trendButton.setStyle("-fx-background: #bcbdc1");
        trendButton.setStyle("-fx-background-radius: 0");

        // transactionButton settings
        transactionButton.setPrefWidth(300);
        transactionButton.setPrefHeight(80);
        transactionButton.setStyle("-fx-base: #aeacb0");
        transactionButton.setStyle("-fx-background-radius: 0");

        // Add buttons to the vBox
        vBox.getChildren().addAll(importButton, trendButton, transactionButton);

        // TableView settings
        transactionTable.setPrefHeight(568);
        transactionTable.setPrefWidth(694);
        transactionTable.setLayoutX(247);
        transactionTable.setLayoutY(50);
        transactionTable.setStyle("-fx-background-color: CAC9CC;");
        transactionTable.setEditable(false);

        // Add components to anchorPane
        anchorPane.getChildren().addAll(vBox, transactionTable);

        // Add anchorPane to scene and show it
        primaryStage.setScene(new Scene(anchorPane));
        primaryStage.show();
    }
}

enter image description here

Upvotes: 2

Views: 2807

Answers (1)

fabian
fabian

Reputation: 82461

Buttons

By setting the style property, you replace the old style. Doing this multiple times does not combine the styles. You should set a value that combines the rules.

Instead of

transactionButton.setStyle("-fx-base: #aeacb0");
transactionButton.setStyle("-fx-background-radius: 0");

use

transactionButton.setStyle("-fx-base: #aeacb0; -fx-background-radius: 0;");

TableView

TableView shows little of it's own background. Most coloring you'll see is the background color of the TableRows that are added as descendants of the TableView. You'll need to use a CSS stylesheet to do this though (unless you want to use a rowFactory to do the styling).

.table-view .table-row-cell {
    -fx-background-color: #CAC9CC;
}

Upvotes: 1

Related Questions