This discussion is archived
8 Replies Latest reply: Nov 6, 2012 4:22 AM by bmy1 RSS

ComboBox font size

bvm Newbie
Currently Being Moderated
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
    jsmith Guru
    Currently Being Moderated
    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
    bvm Newbie
    Currently Being Moderated
    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
    jsmith Guru
    Currently Being Moderated
    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);
        flowPane.setId("flowPane");
        ChoiceBox choiceBox = new ChoiceBox(FXCollections.observableArrayList("option 1", "option 2"));
        choiceBox.getSelectionModel().select(0);
        Label label = new Label("Options");
        flowPane.getChildren().addAll(label, choiceBox);    
        Scene scene = new Scene(flowPane);
        scene.getStylesheets().add(ChoiceColor.class.getResource("choices.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
      }
    }
    // 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 Pro
    Currently Being Moderated
    .combo-box-popup .list-view .list-cell .text {
    -fx-fill: red;
    -fx-font-size: 16px;
    }
  • 5. Re: ComboBox font size
    jsmith Guru
    Currently Being Moderated
    That's very cool. Works great. Thx David.
  • 6. Re: ComboBox font size
    956927 Newbie
    Currently Being Moderated
    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
    BR
  • 7. Re: ComboBox font size
    edward17 Newbie
    Currently Being Moderated
    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
    bmy1 Newbie
    Currently Being Moderated
    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?

Legend

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