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

Question

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

Added some padding to show it better:

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.

Can you show some code? Your css, at least, and a cell factory, if you have one? — James_D, Jul 30 '15 at 14:41
My guess is that `border-bottom` is set on that last element, but it's only a guess without code. — Jacob, Jul 30 '15 at 14:45
@divinecomedian `border-bottom` is not a valid css property in JavaFX. — James_D, Jul 30 '15 at 15:03
Ah, I see. I thought it was compiled CSS, but that was before code was posted. Well whatever the JavaFX equivalent that gets compiled to CSS `border-bottom` is, I assume that's what is being set on the last element. If you're using some kind of default/framework stylesheet, then it's probably set on there. — Jacob, Jul 30 '15 at 15:12

score 6 · Accepted Answer · answered Aug 02 '15 at 07:33

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:

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:

This worked perfectly, thanks! I'll give the bounty once the time is up — Constant, Aug 02 '15 at 13:01

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

1 Answers1