How to refer to an anchor pane in css?

Question

is there a possibility to refer to an anchor pane in css?

If the anchor pane happens to be the root, than it's ok:

.root{
-fx-background-image: url("xxx.yy");
}

It works. But if not, then how to do this? I tried .anchor-pane{}, it didn't work. Then I read, that anchor pane has everything that Pane has. So I tried .pane{} too... It didn't work.

How can I set the background to a none root anchor pane? Thank you!

score 8 · Accepted Answer · answered Feb 26 '15 at 19:55

8

You can always assign a css class and add it to the AnchorPane explicitly

anchorPane.getStyleClass().add("pane");

In your css :

.pane{
    -fx-background-image: url("xxx.yy");
}

You can perform the same by adding a css id

anchorPane.setId("pane");

In you css :

#pane{
    -fx-background-image: url("xxx.yy");
}

answered Feb 26 '15 at 19:55

ItachiUchiha

36,135
10
122
176

and what about if I want a pane:hover? – Sredny M Casanova Oct 15 '15 at 13:49
I just tried it, and it works fine! thanks I didn't know it worked of this way – Sredny M Casanova Oct 15 '15 at 14:31

score 4 · Answer 2 · answered Feb 26 '15 at 19:56

This answer is the same as Itachi's I just wrote it at the same time..

You use CSS selectors in a CSS stylesheet to select nodes.

A pane is a node. A node can have a css id set on it node.setId("xyzzy-id"), or it can have style classes set on it node.getStyleClass().add("xyzzy-class").

For the provided examples you could select the pane in either of these ways:

Select by ID:

#xyzzy-id {
    -fx-background-color: palegreen;
}

Select by Class:

.xyzzy-class {
    -fx-background-color: papayawhip;
}

You can also set FXML attributes on the node for the id and style class (rather than doing this in code as explained above). SceneBuilder has fields for this, so if you are writing FXML using SceneBuilder, just fill in the appropriate fields and it will add the required attributes to your FXML file.

How to refer to an anchor pane in css?

2 Answers2