Search code examples
javafxjavafx-8progress-indicator

JavaFX: How to remove border from ProgressIndicator?

This is nearly the same question as this, with one slight difference. I also started seeing borders around my ProgressIndicator controls starting with Java 8u45, but I see them only when I select the 'user agent' stylesheet to Caspian. It looks terrible, but I am quite invested in the Caspian stylesheet and unwilling to change it right now. Here is some code that demonstrates the problem. Obviously, you must uncomment the comment to see the problem.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.control.ProgressIndicator;
import javafx.stage.Stage;
import javafx.geometry.Insets;

public class ProgressIndicatorWithBorder extends Application {

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

    @Override
    public void start(Stage primaryStage) {
        // this.setUserAgentStylesheet(Application.STYLESHEET_CASPIAN);
        ProgressIndicator pi = new ProgressIndicator();
        BorderPane borderPane = new BorderPane();
        borderPane.setCenter(pi);
        borderPane.setMargin(pi, new Insets(12));
        Scene scene = new Scene(borderPane, 640, 480);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}
Solution

  • Assumptions

    As the questioner haven't mentioned, the ProgressIndicator could be used in two ways:

    • inderminate (is running endless)
    • determinate (counts percentage from 0 to 100)

    Problem

    The Problem is only related to the inderminate state, because the ProgressIndicator style for the spinner seems to conflict with the Datepicker style for it's spinner. So the JavaFX Developers had choosen to make a Bugfix in Java 8u40. This was done to modena.css, as it is the default CSS of JavaFX.

    But in your case you want to use the old style caspian.css. So you have to do it the same way, as they've done it here.

    Kevin Rushforth (one of the JavaFX guys) has made two screenshots of the behavior:

    ProgressIndicator-Bad

    ProgressIndicator-Bad.png

    ProgressIndicator-Good

    ProgressIndicator-Good.png

    Solution

    Make an own stylesheet file. I called mine pibug.css. Set it on the ProgressIndicator as it's stylesheet. This will not override the other defaults already set in caspian.css.

    pibug.css

    .progress-indicator:indeterminate > .spinner {        
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}

    But this is not all, if you want your Datepicker works well with caspian.css, you need to set the following style on your Datepicker:

    dpbug.css

    .date-picker-popup > * > .spinner {
    -fx-spacing: 0.25em; /* 3 */
    -fx-alignment: CENTER;
    -fx-fill-height: false;
    -fx-background-color: transparent; /* this line was added */
}