Making a smaller JavaFX ComboBox

Question

I'm trying to make a smaller version of the ComboBox but the gap between the text and the arrow button is constant no matter what I do.

If I use the css:

.combo-box-base > *.arrow-button {
    -fx-padding: 0 0 0 0;
    -fx-background-color: pink, pink, pink, pink;
}

the arrow button gets smaller but the ComboBox itself still have the same size, only increasing the gap between the arrow and text to compensate.

If I do

.combo-box > .list-cell {
    -fx-padding: 0 0 0 0;
    -fx-border-insets: 0 0 0 0;
}

The combo get a smaller height but the width remain fixed.

Is there any way to make the preferred size of the combo smaller by reducing the size between the text and arrow?

Answer 1

I know this question is quite old but i came across the same problem and wanted to solve it. So i started debugging the JavaFX code step by step to get an idea where the additional space comes from. It took me longer than it should because i overlooked a small piece of code with a huge impact.

The class ComboBoxListViewSkin is by default responsible for the computation of the ComboBox width. Its compute method delegates the computation to the super class and the prefWidth method of the field listView and chooses the greater result.

/** {@inheritDoc} */
@Override protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
    double superPrefWidth = super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset);
    double listViewWidth = listView.prefWidth(height);
    double pw = Math.max(superPrefWidth, listViewWidth);

    reconfigurePopup();

    return pw;
}

The listView field is actually an instance of an Anonymous Classes extending ListView which does some ComboBox specific things and overrides some methods. One of these methods is protected double computePrefWidth(double height). It contains the line which causes the problem with extra whitespace we cannot get rid of.

pw = Math.max(comboBox.getWidth(), skin.getMaxCellWidth(rowsToMeasure) + 30);

Adding 30 to the widest cell's width is exactly what we don't want. Because it's hard coded we cannot easily change it. I overlooked it at first glance causing some WTF moments when debugging the code. Of course you can extend ComboBoxListViewSkin and override its computePrefWidth method but i think the default ComboBoxListViewSkin class should provide the possibility to change this extra whitespace easily. So I filed an issue at GitHub.

Answer 2

Have you tried setting the padding of .combox-box > .text-input ?
According to Oracles ComboBox CSS documentation, this could be another source of padding.
If you plan on developing more CSS-rules, maybe have a look at the CSS inspector of the SceneBuilder2 or use ScenicView. ScenicView also allows live-modification of the CSS, which significantly improves debugging speed.