0

So I'm trying to add a stylesheet to my scene. That works just fine, until I come to the second layer of the scene. I have the following style.css:

.label: {
    -fx-font: 16px "Serif";
    -fx-padding: 5;
}

.root {
    -fx-background: cornflowerblue;
    -fx-fill: orchid;
}

I managed to attach that to my scene with the following code:

private val mainLayout = new BorderPane() {...} // stylesheet missing
private val baseLayout = new StackPane() { // root element, has stylesheet
  children.add(mainLayout)
  ...
}
private val scene: Scene = new Scene(baseLayout) {
  stylesheets.add("style.css") // stylesheet works, but I can only style root
}

The root styling works as well but if I click through the layers in the Debugger the stylesheet vanishes after the root element. My root is a StackPane and that contains a BorderPane. The BorderPane already doesn't contain the given stylesheet.

What am I missing? Does the stylesheet not delegate through when I add elements later? I'm not using scene builder at the moment because I had some dependency issues with macro extension in scala.

Thanks in advance


Edit

Breaking down the problem: I have my stylesheet styling root and label. I create my scene:

var label: Label = new Label()
label.setText("Hello World!")
private val root = new StackPane() {
  children.add(label)
}
private val scene: Scene = new Scene(root) {
  stylesheets.add("style.css")
}

The root styling works, the label is unchanged. enter image description here

I'm using the the scalafx library so all my fx types are from this library (scalafx.scene.layout.Label, scalafx.scene.Scene, etc.)

Community
  • 1
  • 1
Aram Becker
  • 2,026
  • 1
  • 20
  • 32
  • "The root styling works as well but if I click through the layers in the Debugger the stylesheet vanishes after the root element." I don't get what this means. – Jai Nov 16 '17 at 01:01
  • When I first looked, the stylesheet was in the scene's stylesheets list as well as in the root's but nor in any of the children. I just tried again and it's gone from root too.The styling still works but only for the root element – Aram Becker Nov 16 '17 at 01:15
  • 1
    The stylesheets do not get inherited by child nodes, it is the styles that the stylesheet has defined that can be inherited by the child nodes. It would be better to use image to illustrate what the exact problem is. – Jai Nov 16 '17 at 01:50
  • @Jai Thanks, updated my answer. – Aram Becker Nov 16 '17 at 09:37

1 Answers1

0

Alright. Sorry. I have found the error: I added a colon after the label tag in the css. I don't have the IDEA ultimate edition so no css support, thats why I didn't notice. Now it works. Correct css should look like this:

.label {
    -fx-font: 16px "Serif";
    -fx-padding: 5;
}

.root {
    -fx-background: cornflowerblue;
    -fx-fill: orchid;
}
Aram Becker
  • 2,026
  • 1
  • 20
  • 32