Controlsfx PopOver style and focus

Question

I'm working with a Popover, which is used as a tooltip-like help-display for a Textfield. It contains a Label and a TextArea as content and is created, when the user enters the text field. (Via FocusPropery.addListener )

I apply the style using:

popOver.getRoot().getStylesheets().add(...)

(as found in the documentation documentation )

This works for the TextArea, but only partialy for the label.

My Style looks like this:

*{
    -tb-dark-grey: rgb(32,38,44);
}

.root {
   -fx-base: -tb-dark-grey;
   -fx-background: -tb-dark-grey;
   -fx-control-inner-background: -tb-dark-grey;
}

This works very good in my main window. Including all Labels and TextAreas. Everything gets a dark-blue background with white text. For the Label in the Popover however it changes only the text color to white but the background stays at the usual light grey.

I tried using the TextArea as a workaround. This works for the style. But it always steals the focus from the text field. This makes it impossible to type something. Disabling the TextArea works,but that changes the style of the TextArea.

I already tried appling the style as found in this other question. I also tried getting the focus back with, which also did not work.

popup.Show(this.inputField)
this.inputField.requestFocus(); // also tried this with Platform.runLater

Jonatan Stenbacka · Accepted Answer · 2016-04-25T14:55:32.577

Your problem should be that Label doesn't use any of the colors you have overwritten in your .root style class. According to JavaFX CSS reference guide you can style the background of a Label by using fx-background-color.

Adding the following line to your stylesheet should do the trick:

.label {
    -fx-background-color: -tb-dark-grey;
}

You can also apply the style individually for each label by creating a custom style class if you want to style labels differently:

CSS:

.custom-label {
    -fx-background-color: -tb-dark-grey;
}

And then applying it to a specific label:

Label label = new Label("I am a label");
label.getStyleClass().add("custom-label");

Edit: You should probably be aware that your TextArea will not display the exact color you've defined in your stylesheet. If you check the Modena stylesheet, which is the default theme and style for JavaFX (how to find it is described here). You will find the following css for the TextArea content:

.text-area .content {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-radius: 2;
}

As you can see. The background color of the TextArea content is not exactly the -fx-control-inner-background that you have defined in your stylesheet, but a linear gradient that goes from a color derived from -fx-control-inner-background to the color you want. This might not even be noticeable for you, but could be good to know.

Setting the color of the TextArea background so that is it precisely your color could be done like this:

.text-area .content {
    -fx-background-color: tb-dark-grey;
}

Works. That is basically the solution I used in the end. I did not like the idea of explicitly skinning the Label. As a more general solution I wrote a helper class for creating popovers that will wrap the desired content into a VBox and applies my base color as a background to that VBox. `vBox.setStyle("-fx-background-color: -tb-skin-base; ");`This way it works for all possible forms of context, not only for the Label. This keeps my css cleaner. Also thanks for pointing out the TextArea color. — FrankT, Apr 26 '16 at 13:51

Controlsfx PopOver style and focus

1 Answers1