search

sshahine / JFoenix

JavaFX Material Design Library
MIT License
6.29k stars 1.06k forks source link

JFXComboBox default styling #1146

Open cervonwong opened 3 years ago

cervonwong commented 3 years ago

I was wondering why the popup listview of JFXComboBox looks like the default ComboBox styling.

image

Is there anyway to style the listview to look like the one in material.io, with ripple effect on selection?

Also the popup listview blocks the underline of the JFXComboBox. Is there any way to make it look like this?

image

MarcusOtter commented 3 years ago

Bumping this, I too feel like JFXComboBox leaves a lot to be desired

MarcusOtter commented 3 years ago

I experimented a bit and was able to write some css to make the popup appear a few pixels down, so that the underline is shown. Also, I was able to implement alternating background colors on the items. Change out the colors as you see fit, these are just some random warm-ish colors I used for my application.

.combo-box-popup .list-view {
    -fx-background-color: #e5dbd7;
    -fx-background-radius: 0;
    -fx-translate-y: 2;
}

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

.jfx-combo-box:hover,
.jfx-combo-box:selected,
.jfx-combo-box:focused,
.combo-box-popup .list-view .list-cell:odd {
    -fx-background-color: #ede2de;
}

image

(Scrollbar CSS found here) (Colors for selected item CSS found here)