ComboBox styles for list-cell and list-view are not loaded.
You must set a CellFactory where you can not use style class (RT-28936).
Attached test Class
---ComboBoxTest.java
package es.indra.ifocucs.hmi.components.test.header;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Callback;
public class ComboBoxTest extends Application {
private AnchorPane root = new AnchorPane();
@Override
public void start(Stage primaryStage) {
root.setPrefSize(200, 200);
root.setStyle("-fx-background-color:#ffffff;");
ObservableList<String> list = FXCollections.observableArrayList("First","Second","Third","Fourth","Fifth");
ComboBox<String> comboBox = new ComboBox<String>(list);
comboBox.setId("my-combo");
comboBox.getStyleClass().add("my-combo");
comboBox.getSelectionModel().selectFirst();
comboBox.setLayoutX(50);
comboBox.setLayoutY(50);
//comboBox.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
//@Override
//public ListCell<String> call(ListView<String> p) {
//p.setPrefHeight(130);
//p.setPrefWidth(110);
//p.setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-border-width:1 1 1 1; -fx-border-color:#C4D019; " +
//"-fx-border-radius: 5 5 5 5; -fx-background-radius:5 5 5 5; " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;" +
//"-fx-graphic:url('imgcab_cmbperfil.png');");
//
//
//return new ListCell<String>() {
//{
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-border-width:1px 0px 0px 0px; -fx-border-color:#9E9E9E;" +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;" +
//"-fx-graphic:url('imgcab_cmbperfil.png');");
//
//setOnMouseEntered(new EventHandler<MouseEvent>() {
//@Override public void handle(MouseEvent mouseEvent) {
//if (!isSelected())
//setStyle("-fx-background-color: linear-gradient(to bottom,#C4D019, #586f25); " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//});
//
//setOnMouseExited(new EventHandler<MouseEvent>() {
//@Override public void handle(MouseEvent mouseEvent) {
//if (!isSelected())
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//});
//}
//
//@Override
//public void updateSelected(boolean selected)
//{
//if (selected)
//{
////setStyle("-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25); -fx-graphic:url('imgcab_cmbperfil.png'); " +
////"-fx-graphic-text-gap:10;");
//
// getStyleClass().add("selectedLabel");
//}
//else
//{
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); -fx-label-padding:0px 0px 0px 0px;" +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//super.updateSelected(selected);
//}
//
//@Override
//protected void updateItem(String item, boolean empty)
//{
//super.updateItem(item, empty);
//setText(item);
//}
//
//};
//}
//});
root.setStyle("-fx-background-color: #FF0000;");
root.getChildren().add(comboBox);
Scene scene = new Scene(root);
String cssURL = getClass().getResource("combo-box.css").toExternalForm();
scene.getStylesheets().add(cssURL);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
----combo-box.css
#my-combo{
-fx-background-color: linear-gradient(to bottom,#5C5C5C, #1C1C1C);
-fx-border-color: #FFFFFF;
-fx-border-width: 1 1 1 1;
-fx-border-radius: 5 5 5 5;
-fx-padding:0 0 0 10;
}
#my-combo:hover{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-color:#C4D019;
}
#my-combo .arrow-button{
-fx-background-color: linear-gradient(to bottom,#5C5C5C, #1C1C1C);
-fx-padding:11 10 10 10;
-fx-background-radius: 5 5 5 5;
-fx-border-width:0 0 0 1;
-fx-border-color:#222323;
}
#my-combo .arrow-button:hover{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
}
#my-combo .arrow-button .arrow{
-fx-background-color: #FFFFFF;
}
#my-combo .list-cell {
-fx-font-family:Arial;
-fx-font-size: 14px;
-fx-text-fill: #FFFFFF;
}
.comboLabel{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-width:1 1 1 1;
-fx-border-color:#C4D019;
-fx-border-radius: 5 5 5 5;
-fx-background-radius:5 5 5 5;
-fx-font-family:Arial;
-fx-font-size:14px;
-fx-text-fill: #FFFFFF;
}
.selectedLabel{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
-fx-graphic:url('imgcab_cmbperfil.png');
-fx-graphic-text-gap:10;
}
#my-combo .list-view{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-width:1 1 1 1;
-fx-border-color:#C4D019;
-fx-border-radius: 5 5 5 5;
-fx-background-radius:5 5 5 5;
}
#my-combo .list-view .list-cell {
-fx-background-color: rgba(0,0,0,0);
-fx-font-family:Arial;
-fx-font-size:14px;
-fx-text-fill: #FFFFFF;
-fx-border-width:1px 0px 0px 0px;
-fx-border-color:#9E9E9E;
}
#my-combo .list-view .list-cell:hover
{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586f25);
}
#my-combo .list-view .list-cell.profile-cell:selected {
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
-fx-graphic:url("imgcab_cmbperfil.png");
-fx-graphic-text-gap:10;
}
#my-combo .list-view .list-cell.workspaces-cell:selected {
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
/* -fx-graphic:url("imgcab_wspace.png");
-fx-graphic-text-gap:10;*/
-fx-background-image:url("imgcab_wspace.png");
-fx-background-repeat: no-repeat;
-fx-label-padding:0px 0px 0px 30px;
-fx-background-position:10;
}
You must set a CellFactory where you can not use style class (
Attached test Class
---ComboBoxTest.java
package es.indra.ifocucs.hmi.components.test.header;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.fxml.JavaFXBuilderFactory;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Callback;
public class ComboBoxTest extends Application {
private AnchorPane root = new AnchorPane();
@Override
public void start(Stage primaryStage) {
root.setPrefSize(200, 200);
root.setStyle("-fx-background-color:#ffffff;");
ObservableList<String> list = FXCollections.observableArrayList("First","Second","Third","Fourth","Fifth");
ComboBox<String> comboBox = new ComboBox<String>(list);
comboBox.setId("my-combo");
comboBox.getStyleClass().add("my-combo");
comboBox.getSelectionModel().selectFirst();
comboBox.setLayoutX(50);
comboBox.setLayoutY(50);
//comboBox.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
//@Override
//public ListCell<String> call(ListView<String> p) {
//p.setPrefHeight(130);
//p.setPrefWidth(110);
//p.setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-border-width:1 1 1 1; -fx-border-color:#C4D019; " +
//"-fx-border-radius: 5 5 5 5; -fx-background-radius:5 5 5 5; " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;" +
//"-fx-graphic:url('imgcab_cmbperfil.png');");
//
//
//return new ListCell<String>() {
//{
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-border-width:1px 0px 0px 0px; -fx-border-color:#9E9E9E;" +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;" +
//"-fx-graphic:url('imgcab_cmbperfil.png');");
//
//setOnMouseEntered(new EventHandler<MouseEvent>() {
//@Override public void handle(MouseEvent mouseEvent) {
//if (!isSelected())
//setStyle("-fx-background-color: linear-gradient(to bottom,#C4D019, #586f25); " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//});
//
//setOnMouseExited(new EventHandler<MouseEvent>() {
//@Override public void handle(MouseEvent mouseEvent) {
//if (!isSelected())
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); " +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//});
//}
//
//@Override
//public void updateSelected(boolean selected)
//{
//if (selected)
//{
////setStyle("-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25); -fx-graphic:url('imgcab_cmbperfil.png'); " +
////"-fx-graphic-text-gap:10;");
//
// getStyleClass().add("selectedLabel");
//}
//else
//{
//setStyle("-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E); -fx-label-padding:0px 0px 0px 0px;" +
//"-fx-font-family:Arial; -fx-font-size:14px; -fx-text-fill: #FFFFFF;");
//}
//super.updateSelected(selected);
//}
//
//@Override
//protected void updateItem(String item, boolean empty)
//{
//super.updateItem(item, empty);
//setText(item);
//}
//
//};
//}
//});
root.setStyle("-fx-background-color: #FF0000;");
root.getChildren().add(comboBox);
Scene scene = new Scene(root);
String cssURL = getClass().getResource("combo-box.css").toExternalForm();
scene.getStylesheets().add(cssURL);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
----combo-box.css
#my-combo{
-fx-background-color: linear-gradient(to bottom,#5C5C5C, #1C1C1C);
-fx-border-color: #FFFFFF;
-fx-border-width: 1 1 1 1;
-fx-border-radius: 5 5 5 5;
-fx-padding:0 0 0 10;
}
#my-combo:hover{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-color:#C4D019;
}
#my-combo .arrow-button{
-fx-background-color: linear-gradient(to bottom,#5C5C5C, #1C1C1C);
-fx-padding:11 10 10 10;
-fx-background-radius: 5 5 5 5;
-fx-border-width:0 0 0 1;
-fx-border-color:#222323;
}
#my-combo .arrow-button:hover{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
}
#my-combo .arrow-button .arrow{
-fx-background-color: #FFFFFF;
}
#my-combo .list-cell {
-fx-font-family:Arial;
-fx-font-size: 14px;
-fx-text-fill: #FFFFFF;
}
.comboLabel{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-width:1 1 1 1;
-fx-border-color:#C4D019;
-fx-border-radius: 5 5 5 5;
-fx-background-radius:5 5 5 5;
-fx-font-family:Arial;
-fx-font-size:14px;
-fx-text-fill: #FFFFFF;
}
.selectedLabel{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
-fx-graphic:url('imgcab_cmbperfil.png');
-fx-graphic-text-gap:10;
}
#my-combo .list-view{
-fx-background-color: linear-gradient(to bottom,#808080, #2E2E2E);
-fx-border-width:1 1 1 1;
-fx-border-color:#C4D019;
-fx-border-radius: 5 5 5 5;
-fx-background-radius:5 5 5 5;
}
#my-combo .list-view .list-cell {
-fx-background-color: rgba(0,0,0,0);
-fx-font-family:Arial;
-fx-font-size:14px;
-fx-text-fill: #FFFFFF;
-fx-border-width:1px 0px 0px 0px;
-fx-border-color:#9E9E9E;
}
#my-combo .list-view .list-cell:hover
{
-fx-background-color: linear-gradient(to bottom,#C4D019, #586f25);
}
#my-combo .list-view .list-cell.profile-cell:selected {
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
-fx-graphic:url("imgcab_cmbperfil.png");
-fx-graphic-text-gap:10;
}
#my-combo .list-view .list-cell.workspaces-cell:selected {
-fx-background-color: linear-gradient(to bottom,#C4D019, #586F25);
/* -fx-graphic:url("imgcab_wspace.png");
-fx-graphic-text-gap:10;*/
-fx-background-image:url("imgcab_wspace.png");
-fx-background-repeat: no-repeat;
-fx-label-padding:0px 0px 0px 30px;
-fx-background-position:10;
}