how to set width of drop down of combobox in java fx


Question

My drop down list of the combo box expands to the size of the largest element entered in it , but i want it to of a fixed size.

---------------------
| Small Combobox | V |
--------------------------------------------
| "Long item 1"                              |
--------------------------------------------
| "Long item 2"                              |
 --------------------------------------------
| "Long item 3"                              |
 --------------------------------------------
1
4
3/5/2014 9:07:06 AM

Accepted Answer

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).

enter image description here

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();
    }
}
11
3/5/2014 9:15:48 AM

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

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon