This discussion is archived
3 Replies Latest reply: May 20, 2013 6:10 AM by David Grieve RSS

CSS tags to skin a combobox dropdown listview

sselvia Newbie
Currently Being Moderated
We are tryng to determine the css tag or tags to properly skin the dropdown listview used by the combobox control. We used the fxetools and it does not matter what options are selected the listview won't change colors based on what is selected.

What are the CSS tags that will allow us to skin the listview or a combobox and/or choicebox? If this won't work with CSS are there any other options.
  • 1. Re: CSS tags to skin a combobox dropdown listview
    jsmith Guru
    Currently Being Moderated
    Search the forum for "css combobox" or "css choicebox" over the whole date range - which will provide various css selectors and techniques for styling stuff in combobox.

    I think the root issue to track for style inheritance issues surrounding different popup controls is:
    "https://javafx-jira.kenai.com/browse/RT-19435" PopupControl not styled by Parent's stylesheet rules nor inlined inherited declarations
    Which appears as though it should be fixed in the the most recent Java 8 build, though I haven't tried it:
    https://jdk8.java.net/download.html

    caspian.css will provide you with default css style rules for JavaFX 2.2
    http://hg.openjdk.java.net/openjfx/2.2/master/rt/raw-file/tip/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/caspian/caspian.css
    modena.css will provide you with default css style rules for JavaFX 8
    http://hg.openjdk.java.net/openjfx/8/master/rt/raw-file/tip/javafx-ui-controls/src/com/sun/javafx/scene/control/skin/modena/modena.css

    The css reference guide will provide you with general information on how css works:
    http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
  • 2. Re: CSS tags to skin a combobox dropdown listview
    sselvia Newbie
    Currently Being Moderated
    Thank you for the feedback, I'll have to download and tryout JDK 8.

    It does not matter what we do, nothing is changing the popup listview.
  • 3. Re: CSS tags to skin a combobox dropdown listview
    David Grieve Pro
    Currently Being Moderated
    The following works in 8

    /* test.css */
    #cbox .combo-box-popup .list-cell, #menu1 .menu-item, #mbutton .menu-item {
    -fx-border-color: red;
    -fx-background-color: yellow
    }
    #yellow-tooltip .tooltip {
    -fx-background-color: yellow;
    -fx-text-fill: black;
    }



    @Override public void start(Stage stage) {

    stage.setTitle("Styled Popups");

    BorderPane root = new BorderPane();

    Label lbl = new Label("Controls on the left have styled popups, those on the right do not.");
    root.setTop(lbl);
    BorderPane.setMargin(lbl, new Insets(10, 0, 10, 0));
    BorderPane.setAlignment(lbl, Pos.CENTER);

    VBox center = new VBox(5d);
    root.setCenter(center);
    BorderPane.setMargin(center, new Insets(0, 10, 0, 10));

    center.getChildren().add(new Separator());

    Menu menu1 = new Menu("Yellow");
    menu1.setId("menu1");
    menu1.getItems().addAll(new MenuItem("One.1"), new MenuItem("One.2"));

    Menu menu2 = new Menu("Theme");
    menu2.getItems().addAll(new MenuItem("Two.1"), new MenuItem("Two.2"));

    MenuBar menuBar = new MenuBar();
    menuBar.getMenus().addAll(menu1, menu2);

    center.getChildren().add(menuBar);

    HBox hBox = new HBox(5);
    center.getChildren().add(hBox);

    ComboBox<String> comboBox = new ComboBox<>(FXCollections.observableArrayList("One", "Two", "Three is pretty long"));
    comboBox.setId("cbox");
    hBox.getChildren().add(comboBox);

    comboBox = new ComboBox<>(FXCollections.observableArrayList("One", "Two", "Three"));
    hBox.getChildren().add(comboBox);

    hBox = new HBox(5);
    center.getChildren().add(hBox);

    Button button = new Button("Hover for yellow tooltip");
    button.setId("yellow-tooltip");
    Tooltip tooltip = new Tooltip("The background-color should be yellow");
    button.setTooltip(tooltip);
    hBox.getChildren().add(button);

    button = new Button("Hover for normal tooltip");
    tooltip = new Tooltip("The background-color should be the theme default");
    button.setTooltip(tooltip);
    hBox.getChildren().add(button);

    hBox = new HBox(5);
    center.getChildren().add(hBox);

    MenuButton menuButton = new MenuButton("Yellow popup");
    menuButton.setId("mbutton");
    menuButton.getItems().addAll(new MenuItem("One"), new MenuItem("Two"), new MenuItem("Three"));
    hBox.getChildren().add(menuButton);

    menuButton = new MenuButton("Theme popup");
    menuButton.getItems().addAll(new MenuItem("One"), new MenuItem("Two"), new MenuItem("Three"));
    hBox.getChildren().add(menuButton);

    Scene scene = new Scene(root, 500, 700);
    scene.getStylesheets().add("test.css");
    stage.setScene(scene);
    stage.show();

    }

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points