[FIXED] How to set width of drop down of ComboBox in JavaFX?

Issue

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"                              |
 --------------------------------------------

Solution

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();
    }
}

Answered By - jewelsea
Answer Checked By - Candace Johnson (JavaFixing Volunteer)