JavaFX: Why does my ComboBox add a part of an uneccessary cell?

Question

So i'm currently developing a short training project (calculator) with a GUI using JavaFX (i know it's not good, i know it's outdated). A ComboBox im using is behaving in weird ways and i thought some of you guys maybe know the reason for this. While having exactly one element (cell) the combobox shows the beginning of another cell under the filled one. It looks like this:

The weird thing is, that this doesn't apply, if more elements (cells) get added to the ComboBox. In that case it looks like this:

Why does the ComboBox behave like that?

I've tried searching for a solution in the documentation of the JavaFX ComboBox and also tried searching for someone who had the same problem. I add items to the ComboBox ("backlog") with this line: backlog.getItems().add(outputArea.getText());

I added a listener to the ComboBox ("backlog") using that code:

        backlog.setOnAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent e) {
                outputArea.setText(backlog.getSelectionModel().getSelectedItem());
            }
        });

Finally i used a bit of CSS-styling to make it look better:

.combo-box {
    -fx-background-color: #cddfe0;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.8), 5, 0.0 , 1, 1);
}
.combo-box .list-cell{
    -fx-background-color: #cddfe0;
    -fx-border-color: #f4f3f9;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
    -fx-font: 18px "Digital-7 Mono";
}
.combo-box-popup .list-view{
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

Here's a short MCVE (requested by @BasilBourque ) for you to test it out yourself. After adding a second item the space under the last item in a dropped-out ComboBox gets reduced massively:

package application;
    
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.AnchorPane;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            AnchorPane root = new AnchorPane();
            Scene scene = new Scene(root,400,200);
            
            ComboBox<String> dropDown = new ComboBox<String>(); //creation of the ComboBox
            AnchorPane.setLeftAnchor(dropDown, 50.0);
            AnchorPane.setTopAnchor(dropDown, 50.0);
            dropDown.setPrefWidth(300);
            
            dropDown.getItems().add("Chocolate");
            //dropDown.getItems().add("Caramel"); //remove comment-out to add second item to ComboBox
            
            root.getChildren().add(dropDown); //adding the ComboBox to the root-AnchorPane
            
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

The host system is Windows 10. I'm using JDK 17 with JavaFX 21.

Answer 1

So by trying around a bit i failed to find an actual explanation for the issue, but i found a workaround, that solves the problem (at least in my case). By setting the border width a tad bit higher in CSS, the unwanted part of the empty cell turns invisible (because the border of the ComboBox cells is the same color as my background). The change is only minimal (border width from 1 to 1.5) and the added line is -fx-border-width: 1.5; in the CSS code block:

.combo-box .list-cell{
    -fx-background-color: #cddfe0;
    -fx-border-color: #f4f3f9;
    -fx-border-width: 1.5;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
    -fx-font: 18px "Digital-7 Mono";
}