JavaFX CSS not working

Question

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:

StackoverflowQuestion.scala

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"
            }
         }
      }
   }
}

app.css

#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

score 1 · Answer 1 · answered Apr 22 '15 at 14:42

1

i hope that will help you

package application;

import java.io.IOException;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class StackOverFlow extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        primaryStage.setTitle("JavaFX Welcome");
        BorderPane pane = new BorderPane();
        pane.setId("pane");

        Scene scene = new Scene(pane);

        primaryStage.setScene(scene);
        scene.getStylesheets().add(Welcome.class.getResource("application.css").toExternalForm());
        
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

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

answered Apr 22 '15 at 14:42

Thomas

170
1
12

thanks for the reply. I was looking for more of a "this is why it won't work", but thank you any way. BTW where did `Welcome.class` come from? Your class is named `StackOverFlow `. – J Atkin Apr 22 '15 at 15:04
Welcome it's the name of the project, I forgot to change by the name of the class but it works anyway. – Thomas Apr 22 '15 at 15:10
sorry, i can't help ou more, i don't know scala. – Thomas Apr 22 '15 at 15:21
Well, Thank you any way, looks like I'll be playing around for a while longer – J Atkin Apr 22 '15 at 15:47
no soucy, i have the same problem for the reputation, anyway i was thinking to put .root in the css file instead of the id #pane. – Thomas Apr 22 '15 at 18:56
actually.root doesn't style anything https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#scene `"The Scene object has no settable CSS properties"` – J Atkin Apr 22 '15 at 19:28

score 1 · Accepted Answer · answered Apr 23 '15 at 00:55

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.

Ah, thank you. This is exactly what is was looking for. I had no idea that root was the correct way to do that. Thank you very much. — J Atkin, Apr 23 '15 at 01:40

JavaFX CSS not working

2 Answers2