CODEWITHSUNDEEP
javafxcontrolsfx
FrankT
FrankT

Reputation: 48

Controlsfx PopOver style and focus

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

Upvotes: 0

Views: 1313

Answers (1)

Jonatan Stenbacka
Jonatan Stenbacka

Reputation: 1864

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;
}

Upvotes: 0

Related Questions