3 Replies Latest reply: May 20, 2013 8:10 AM by David Grieve RSS

    CSS tags to skin a combobox dropdown listview

    sselvia
      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
          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
            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
              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();

              }