Question

I have applied CSS style to JavaFX components and it looks like everything is working fine except one situation: when I add JavaFX components to component tree on-the-fly their CSS styles are not applied.

For example following code:

package test;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.util.Math;
import javafx.scene.paint.Color;

function getRect(): Rectangle {
    return Rectangle {
        x: 230 * Math.random()
        y: 60 * Math.random()
        width: 20, height: 20
        styleClass: "abc"
    }
}

def stage: Stage = Stage {
    scene: Scene {
        width: 250, height: 80
        stylesheets: "{__DIR__}main.css"
        content: [
            Rectangle {
                x: 0, y: 0, width: 250, height: 80
                fill: Color.WHITE
                onMouseClicked: function (evt: MouseEvent): Void {
                    insert getRect() into stage.scene.content;
                }
            }
            getRect()
        ]
    }
}

with following stylesheet:

.abc {
    fill: red;
}

in main.css file (both in test package) display red square on white background, but after clicking the main rectangle black (not red) squares are added to scene.

I noticed that:

1. Components added dynamically look just like style information was not applied.
2. If you set their style in JavaFX code then everything works fine.
3. After changing stylesheets property (so that it points to another valid stylesheet) the objects already added render properly.

Does anyone know the solution to this problem? I could of course put all the properties into JavaFX code or provide another stylesheet (for every existing stylesheed) that would contain the same data and change stylesheet right after adding any component, but I would like to find some elegant solution.

Thanks in advance.

Answer 1

It’s a bug in 1.2. It is fixed in the next release.