Text color on JavaFX ComboBox items change only after first selection

Question

I am building an input form in JavaFx from Java 8.0 using SceneBuilder 2.0 on Windows 7 in e(fx)clipse.

I have a simple String ComboBox, and want to change the color and size of the fonts in both the list and the selected String. The css code I use changes the text on the selected item. However, the first time one drops the list, it is in black default font. The second time, the font color and size on all items have changed to the correct values.

How do I make the font list start up in the right color and size?

Here is simplified code from the initialize method in my Controller class:

ObservableList<String> types = FXCollections.observableArrayList
    ( "large", "medium", "small" );

comboBox.setItems( types );

and current css:

#comboBox .list-cell
 {
    -fx-font-family: arial;
    -fx-font-size: 16px;
    -fx-text-fill: #a0522d; 
 }

Solution

You have to create a CellFactory and you can't use CSS ( I don't know why but it's the only way I could get it to work):

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Mainu extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        ComboBox<String> cb = new ComboBox<String>();
        cb.setItems(FXCollections.observableArrayList("Foo","Bar","777","Batman"));
        cb.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
            @Override public ListCell<String> call(ListView<String> p) {
                return new ListCell<String>() {
                    @Override
                    protected void updateItem(String item, boolean empty) {
                        super.updateItem(item, empty);
                            if (item != null) {
                                setText(item);  
             //This won't work for the first time but will be the one
             //used in the next calls
                                getStyleClass().add("my-list-cell");
                                setTextFill(Color.RED);
                                //size in px
                                setFont(Font.font(16));
                            }
                    }
                };
            }
        });
        cb.getSelectionModel().selectFirst();
        Pane root = new Pane();
        root.getChildren().add(cb);
        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {launch(args);}
}

Despite of the fact that you are using the standard API, I believe that you also should use it in the CSS and specify in the CSS that the first time have to be set programmatically as this will be useful for whoever will maintain your software.

style.css

.combo-box .cell{
    -fx-text-fill: blue;
    -fx-font: 16px "Arial";
}
.my-list-cell {
    -fx-text-fill: blue;
    -fx-font: 16px "Arial";
    /* No alternate highlighting */
    -fx-background-color: #FFF;
}

The curious detail: for JavaFX 2 you could set this via CSS but still had to use a CellFactory.