How do I set the background color of an anchorpane with CSS in Java FX

Question

In my FXML document I have the following code:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" styleClass="header-bar" stylesheets="@standards.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">

My css looks like this:

.header-bar
{
-fx-background-color: blue;
}

However this doesn't change the color. However, if I change my FXML to do the exact same thing inline, then it works.

The weird thing is my other styles are applied correctly in the same FXML document.

Any help would be greatly appreciated.

I am using SceneBuilder to prototype screens, and need to be able to rely on CSS applications.

Thanks!

Answer 1

In your FXML document, set id(**not fx:id**), and then in your CSS file use:

#your_id {
-fx-background-color: blue;
}

In your case update FXML to look like this:

<AnchorPane id="anchor" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" styleClass="header-bar" stylesheets="@standards.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">

and css file:

#anchor {
-fx-background-color: blue;
}