csslistviewcomboboxjavafxjavafx-8

Why is there a line at the bottom of this combo box?

I've tried everything to try and remove it, it doesn't look like it's a split pane or a separator either.

enter image description here

Added some padding to show it better:

enter image description here

All I have for code is a ComboBox<String> with elements added to it, no need to show that. As for css, I have this:

.combo-box {
    -fx-focus-color: transparent;
    -fx-background-insets: -1, -1, -1, -1;
}

.combo-box .list-cell {
    -fx-text-fill: white;
}

.combo-box-base .arrow-button {
    -fx-background-color: transparent;
}

.combo-box-base .arrow {
    -fx-shape: "M8.124,13.625l4.125-3.375v2.889l-4.125,3.86L4,13.139V10.25L8.124,13.625z";
    -fx-background-color: white;
}

.combo-box-popup .list-view {
    -fx-effect: null;
}

and

.combo-box {
    -fx-background-color: #2B545E;
    -fx-background-radius: 0;
}

.combo-box-popup .list-view {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled {
    -fx-background-color: #2B545E;
}

.combo-box-popup .list-view .list-cell:filled:hover {
    -fx-background-color: #2E5A66;
}

.combo-box-popup .list-view .list-cell:filled:selected {
    -fx-background-color: #346673;
}

Using Application.STYLESHEET_CASPIAN.

Solution

  • The problem is this style: .combo-box-base .list-view .cell

    It can be easily seen that it's not just a line, but the non-filled content of the listview by specifying a larger height of the listview popup:

    .combo-box-popup .list-view {
    -fx-pref-height:200;
}

    Then your combobox will look like this:

    enter image description here

    So the solution is to colorize that area by adding this style:

    .combo-box-base .list-view .cell  {
    -fx-background-color: #2B545E; 
}

    And you'll get this:

    enter image description here