How to set width of drop down of ComboBox in JavaFX?

Question

The drop down list of my ComboBox expands to the size of the largest element entered in it. However I want it to be a fixed size.

---------------------
| Small Combobox | V |
--------------------------------------------
| "Long item 1"                              |
--------------------------------------------
| "Long item 2"                              |
 --------------------------------------------
| "Long item 3"                              |
 --------------------------------------------

Answer 1

Use CSS

/** file: combo-size.css */

/** Size the combo-box button. */
.combo-box {
    -fx-pref-width: 100;
}

/** Size the combo-box drop down list. */
.combo-box-popup > .list-view {
    -fx-pref-width: 100;
}

Note: I tested this sample only on Java 8 and I believe the -fx-*-width and -fx-*-height css attributes may be new for JavaFX 8.

Sample Usage

In this sample, both the combo box button and the drop down list have been sized to the same preferred width (of 100 pixels).

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class SizedComboBoxSampleWithCss extends Application {
    public static void main(String[] args) { launch(args); }

    @Override public void start(Stage stage) {
        final ComboBox<String> combo = new ComboBox<>();

        combo.setValue(Font.getDefault().getFamily());
        combo.getItems().setAll(Font.getFamilies());
        combo.getStylesheets().add(
                getClass().getResource(
                        "combo-size.css"
                ).toExternalForm()
        );

        StackPane layout = new StackPane(combo);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.show();
    }
}

Answer 2

The solution (of jewelsea) wasn't working the first time for me, so here is my solution if someone needs a work-around. I just provide a custom cell factory, and I get access to the parent ListView and set the maxWidth in it.

combo.setCellFactory(new Callback<ListView<T>, ListCell<T>>() {

        @Override
        public ListCell<T> call(ListView<T> param) {
            ListCell cell = new ListCell<T>() {
                @Override
                public void updateItem(T item, boolean empty) {
                    super.updateItem(item, empty);

                    getListView().setMaxWidth(LIST_VIEW_MAX_HEIGHT);
                    if (!empty) {
                        setText(converter.toString(item));
                    } else {
                        setText(null);
                    }
                }
            };
            return cell;
        }
    });