8 Replies Latest reply on Nov 6, 2012 12:22 PM by bmy1

    ComboBox font size

      It looks to me that the editable text field of a ComboBox inherits the font size of its ancestors, but the popup list of choices doesn't. Is this a bug or a feature? If the latter, what's the right way to style the popup? Looking at the CSS reference, I tried
      #myComboBox .list-cell {
          -fx-font-size: ...
      but it didn't take.
        • 1. Re: ComboBox font size
          Something like
          .combo-box-popup .list-cell { ... }
          may work (haven't tried it though).
          Not sure if you can stick the id in there or not as it may not carry through from the parent stage to the popup's stage.

          All the popup controls (contextmenu, choicebox, combobox, dropdown, etc) work this way.
          Because the popups show up in the own stages with their own root scenes, the stuff in the popup doesn't inherit any styles from the rest of the scenes parents.
          Although perhaps there are good reasons for this, I find it quite annoying.
          What I have done in the past is listened for when the popups are displayed grabbed their root and then restyled them at runtime - which is not a good solution for numerous reasons.
          Looking at the css documentation it shows a substructure like so:
          list-cell - a ListCell instance used to show the selection in the button area of a non-editable ComboBox
          text-input — a TextField instance used to show the selection and allow input in the button area of an editable ComboBox
          combo-box-popup - a PopupControl that is displayed when the button is pressed
          - list-view - a ListView
          -- list-cell - a ListCell
          So I think you want to apply your style to combo-box-popup rather than directly to the combobox because applying it directly to the combobox will only make it take effect on the combobox button and not on the list of possible choices.
          • 2. Re: ComboBox font size
            jsmith wrote:
            Something like
            .combo-box-popup .list-cell { ... }
            may work (haven't tried it though).
            Unfortunately not. In fact, even the absurdly over-broad
            .list-cell { ... }
            doesn't work.
            • 3. Re: ComboBox font size
              Here is a sample I did earlier for a ChoiceBox.
              As the concepts are similar, perhaps it gives you some direction on how to knock up a similar sample for ComboBox.
              import javafx.application.Application;
              import javafx.collections.FXCollections;
              import javafx.scene.Scene;
              import javafx.scene.control.*;
              import javafx.scene.layout.FlowPane;
              import javafx.stage.Stage;
              public class ChoiceColor extends Application {
                public static void main(String[] args) { launch(args); }
                @Override public void start(Stage stage) {
                  FlowPane flowPane = new FlowPane(10, 10);
                  ChoiceBox choiceBox = new ChoiceBox(FXCollections.observableArrayList("option 1", "option 2"));
                  Label label = new Label("Options");
                  flowPane.getChildren().addAll(label, choiceBox);    
                  Scene scene = new Scene(flowPane);
              // choices.css
              FlowPane {
                -fx-background-color: fuschia;  
                -fx-font-size: 20;
              #flowPane .label {
                -fx-text-fill: red;
              #flowPane .choice-box .label {
                -fx-text-fill: green;
              #choice-box-menu-item .label {
                -fx-text-fill: salmon;
                -fx-font-size: 20;
              The key is the mystical #choice-box-menu-item .label selector. As you can see I never assigned, that id, so it comes from somewhere in the skin and I found it in caspian.css in jfxrt.jar. Perhaps you can find something similar for combobox?
              • 4. Re: ComboBox font size
                David Grieve-Oracle
                .combo-box-popup .list-view .list-cell .text {
                -fx-fill: red;
                -fx-font-size: 16px;
                • 5. Re: ComboBox font size
                  That's very cool. Works great. Thx David.
                  • 6. Re: ComboBox font size
                    Hy there,

                    this did not work for me ;(
                    so i have a combobox in JavaFX 2.0 with default style combo-box and combo-box-base

                    If a apply in css to .combo-box .text{
                    -fx-fill: red;
                    -fx-font-size: 16px;
                    The default visible value is colored correct.

                    Then i tried to apply you style with
                    .combo-box-popup .list-view .list-cell .text {
                    -fx-fill: red;
                    -fx-font-size: 16px;

                    But could not see any difference to my listed items when i click the combo.

                    I also tried
                    .list-view .list-cell .text {
                    -fx-fill: red;
                    -fx-font-size: 16px;

                    But did not work either.

                    Thanks for additional hints
                    • 7. Re: ComboBox font size
                      In my experinece it works, but not once you compile the code. I opened a bug a while back on it.
                      • 8. Re: ComboBox font size
                        Are there any news on this topic? I guess the issue is covered by http://javafx-jira.kenai.com/browse/RT-23626, but are there any valid workarounds available?