How to set tab name size in JavaFX

Question

I have this simple tabs example:

primaryStage.setTitle("Tabs Test");
        Group root = new Group();
        Scene scene = new Scene(root, 600, 500, Color.WHITE);

        TabPane tabPane = new TabPane();
        BorderPane mainPane = new BorderPane();

        //Create Tabs
        Tab tabA = new Tab();
        tabA.setText("Main Component");
        tabA.setClosable(false); // da se mahne opciqta da se zatvarq tab
        //Add something in Tab
        StackPane tabA_stack = new StackPane();
        tabA_stack.setAlignment(Pos.CENTER);
        tabA_stack.getChildren().add(accordion); // dobavq se tuka accordion
        tabA.setContent(tabA_stack);
        tabPane.getTabs().add(tabA);

        Tab tabB = new Tab();
        tabB.setText("Second Component");
        tabB.setClosable(false); // da se mahne opciqta da se zatvarq tab
        //Add something in Tab
        StackPane tabB_stack = new StackPane();
        tabB_stack.setAlignment(Pos.CENTER);
        tabB_stack.getChildren().add(new Label("Label@Tab B"));
        tabB.setContent(tabB_stack);
        tabPane.getTabs().add(tabB);

        Tab tabC = new Tab();
        tabC.setText("Last Component");
        tabC.setClosable(false); // da se mahne opciqta da se zatvarq tab
        //Add something in Tab
        StackPane tabC_vBox = new StackPane();
        tabC_vBox.setAlignment(Pos.CENTER);
        tabC_vBox.getChildren().add(new Label("Label@Tab C"));
        tabC.setContent(tabC_vBox);
        tabPane.getTabs().add(tabC);

        mainPane.setCenter(tabPane);

        mainPane.prefHeightProperty().bind(scene.heightProperty());
        mainPane.prefWidthProperty().bind(scene.widthProperty());

        root.getChildren().add(mainPane);
        primaryStage.setScene(scene);
        primaryStage.show();

Can you tell me how I can set the size of the tab's name? I want to make them small.

Answer 1

You can do it through CSS. Create a "myStyle.css" file in your project and override the default CSS selector of the tab label by pasting the following into this css file:

.tab .tab-label {
    -fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin";
    -fx-background-color: transparent;    
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
    -fx-font-size: 8px; /* all the same except this newly added one */
}

This css is originally copied from caspian.css. For more customization use -fx-font and/or refer to JavaFX CSS Reference Guide.

Load the css file into the scene.

scene.getStylesheets().add(this.getClass().getResource("myStyle.css").toExternalForm());

or into the tabPane directly,

tabPane.getStylesheets().add(this.getClass().getResource("myStyle.css").toExternalForm());