Search code examples
scalajavafxstylesheetscalafx

ScalaFX/JavaFX Stylesheet is not delegated completely


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.)


Solution

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