Increase Combobox text size

Question

I have this basic example of JavaFX combobox:

public class JavaFXComboBox extends Application {

    @Override
    public void start(Stage primaryStage) {

        final ComboBox comboBox = new ComboBox();
        comboBox.getItems().addAll(
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4");
        comboBox.setValue("Item 1");

        final Label label = new Label();

        Button btn = new Button();
        btn.setText("Read comboBox");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                label.setText("selectd: " + comboBox.getValue());
            }
        });

        VBox vBox = new VBox();
        vBox.setPadding(new Insets(5, 5, 5, 5));
        vBox.setSpacing(5);
        vBox.getChildren().addAll(label, comboBox, btn);

        StackPane root = new StackPane();
        root.getChildren().add(vBox);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Can you tell me how I can increase the size of the text insight the combox but keeping the original combobox label size?

Answer 1

Make a combo.css file like-

.combo-box-popup .list-view {
    -fx-font-size : 15pt;
}

/*added this in an edit*/
.combo-box-popup .list-view .list-cell {
    -fx-padding: -1 -1 -1 -1;
}

and add the line scene.getStylesheets().add("javafxcombobox/combo.css"); after the scene is created.

Some snips from caspian.css will give you things to try. Play with the padding and see what happens.

.combo-box-popup .list-view {
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}

.combo-box-popup .list-view .list-cell {
-fx-padding: 4 0 4 5;
-fx-background-color: -fx-control-inner-background;
}

I'd like to know if there's a way to add sub styles in comboBox.setStyle() if anyone knows.

Answer 2

You just need to set setCellFactory on your comboBox as shown below after its initialization as shown below -

   comboBox.setValue("Item 1");

        comboBox.setCellFactory(
                new Callback<ListView<String>, ListCell<String>>() {
                    @Override
                    public ListCell<String> call(ListView<String> param) {
                        final ListCell<String> cell = new ListCell<String>() {
                            @Override
                            public void updateItem(String item,
                                    boolean empty) {
                                super.updateItem(item, empty);
                                if (item != null) {
                                    setText(item);
                                    setFont(this.getFont().font(this.getFont().getName(), 30.0)); //set your desired size
                                } else {
                                    setText(null);
                                }
                            }
                        };
                        return cell;
                    }

                });

        final Label label = new Label();

This will helps you. Thanks!!