CSS Styling for JFoenix Autocomplete on ComboBox

[iCoderJ]

Is there a way to use CSS to style the drop down list background color of the Combo Box? I am using ComboBox (not JFXComboBox) & trying JFoenix Autocompletion, but the CSS styling not working.

I tried with below code as shown in #644 (comment)
.autocomplete-popup .autocomplete-list {
-fx-background-color: yellow;
}

Code used for AutoComplete as shown in #220 (comment)

Hope the issue faced is clear.

[schlegel11]

Hi,
do you want to style the ComboBox or the AutoCompletePopup?
Anyway it doesn't matter because they using the same classes from ListView.
So if you want to change the background color add a CSS file to your scene like:

...
    Scene scene = new Scene(root, 300, 275);
    scene.getStylesheets().add(Main.class.getResource("/main-app.css").toExternalForm());
...

In the CSS file you have to define the following:

...
/*Change selected cells of autocomplete popup*/
.jfx-autocomplete-popup .list-cell:filled:selected {
    -fx-background-color: #64ffe6;
}
/*Change cells of autocomplete popup*/
.jfx-autocomplete-popup .list-cell {
    -fx-background-color: #5f68ff;
}
/*Change cells of combobox*/
.combo-box .list-cell {
    -fx-background-color: #ff92b8;
}
...

.list-cell has also some other pseudo classes.

That should produce the following:

Greetings

[jfoenixadmin]

@schlegel11 those items set though, lol. Maybe I should use better naming in demos :p

[schlegel11]

Don't worry 😉
I think it isn't from an official demo. I just used the code from the referenced issue #220 (comment)

[iCoderJ]

@schlegel11 unfortunately it is not working at my end even after trying the CSS styling you have mentioned (Screenshot attached). I am using ComboBox not JFXComboBox, & trying the AutoComplete feature only as per the code referenced in my initial message (is it necessary to use JFxComboBox only to get the CSS styling working?)

Any ideas how to fix it?

[schlegel11]

Hi,
I used the same code from the issue which you included in your issue so with the default combo box.
Full code example is:

package sample;

import com.jfoenix.controls.JFXAutoCompletePopup;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Main extends Application {

  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("Combo");

    ComboBox<String> comboBox = new ComboBox<>();
    Pane root = new Pane(comboBox);

    comboBox.setEditable(true);
    comboBox.getItems().addAll("HELLO", "TROLL", "WFEWEF", "WEF");

    JFXAutoCompletePopup<String> autoCompletePopup = new JFXAutoCompletePopup<>();
    autoCompletePopup.getSuggestions().addAll(comboBox.getItems());

    // SelectionHandler sets the value of the comboBox
    autoCompletePopup.setSelectionHandler(
        event -> {
          comboBox.setValue(event.getObject());
        });

    TextField editor = comboBox.getEditor();
    editor
        .textProperty()
        .addListener(
            observable -> {
              // The filter method uses the Predicate to filter the Suggestions defined above
              // I choose to use the contains method while ignoring cases
              autoCompletePopup.filter(
                  item -> item.toLowerCase().contains(editor.getText().toLowerCase()));
              // Hide the autocomplete popup if the filtered suggestions is empty or when the box's
              // original popup is open
              if (autoCompletePopup.getFilteredSuggestions().isEmpty()
                  || comboBox.showingProperty().get()) {
                autoCompletePopup.hide();
              } else {
                autoCompletePopup.show(editor);
              }
            });

    Scene scene = new Scene(root, 300, 275);
    scene.getStylesheets().add(Main.class.getResource("/main-app.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

Where main-app.css is located in a resources dir.
Hope it will work.

Greetings

[iCoderJ]

@schlegel11 a little perplexed. If I run just this sample code it works, but the same does not in my application. Is it something to do with JDK11 as I am using that. Also if I run this code using JDK11 I get an error as posted by someone here - Link

So to test this code I had to switch the JDK to JDK10 & it worked. Also my view is maintained in a FXML file. Could JDK11 & FXML have any bearing on how JFoenix autocompletion CSS behaves ?

[schlegel11]

Hmm ok.
I'm not really involved into JavaFX with Java11.
I could try it in the next days but for now I'm not sure how you could fix it. Sorry

Greetings

[iCoderJ]

Thank you very much for your time. If I manage 2 find something will post it here or if JFoenix developers have a look at it & point out would help. Thanks once again.

[jfoenixadmin]

Hello @iCoderJ
you can fix the cell truncation by changing the list view fixed cell size.

Regarding Java11, not sure if it might help but try using the latest version of JavaFX

Regards,