J Atkin J Atkin -5 years ago 295
CSS Question

JavaFX CSS not working

I am having trouble with this sample not styling the background borderpane green. The css has NO effect at all no matter how much I tweak it.
My code:


import scalafx.application.JFXApp
import scalafx.application.JFXApp.PrimaryStage
import scalafx.scene.Scene
import scalafx.scene.control.Button
import scalafx.scene.layout.BorderPane

object StackoverflowQuestion extends JFXApp {

stage = new PrimaryStage {
title = "Stackoverflow Sample"

scene = new Scene {
stylesheets add getClass.getResource("app.css").toExternalForm

content = new BorderPane {
id = "background"

center = new Button {
text = "Button"


#background {
-fx-background-color: green;

I did see this related post but it has no answer
JavaFx Css not working with eclipse. I know that the css is being read because it prints a error if I remove a brace from the css

Answer Source

Looking at you original code. The issue is more likely with layout than CSS. The pane is covered by the button so you cannot see it. You need to make sure that pane is larger than the button, for instance, add padding to you CSS:

#background {
    -fx-background-color: green;
    -fx-padding: 10;

Here is what I see when I do that:

Button with padding and green background

Second thing you may want to do is to change content to root, so your pane will fill the Scene, you will have

root = new BorderPane { ...

When you use root you put a pane directly on the scene. The restriction is that you can only assign a Parent to root (no problem here). When you use content you can assign any Node but it is first wrapped into a Group before being assigned to root. Wrapping in Group changes how the layout is done, in your case limiting size of the BorderPane to its content rather stretching it to match Scene size.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download