7

I'm trying to get an iTunes like progress bar that is very small (height of about 5px) but I can't seem to go any lower than 19 or 20px.

I tried setting -fx-max-height with no avail, also on the surrounding pane. Note that this value does indeed change the height - I just can't get it less than about 20px.

Any ideas how to achieve that? I'd like to avoid using a plain rectangle for indicating progress because of loss of semantic and support of assistive technology.

Thanks.

phdoerfler
  • 470
  • 6
  • 19
  • 2
    This question is a duplicate of [How can I style the ProgressBar component in JavaFX](http://stackoverflow.com/questions/19417246/how-can-i-style-the-progressbar-component-in-javafx), but José has given such a great answer that I really don't want to mark is as such, and will just update the other answer to reference this :-) – jewelsea Dec 03 '14 at 00:17
  • Thanks for pointing that progress bar wiki out. It's really neat! – phdoerfler Dec 03 '14 at 12:00
  • Thanks @jewelsea for your kind comments and updating the wiki answer with mine :) – José Pereda Dec 03 '14 at 12:28

1 Answers1

23

The ProgressBar default styling is the reason why you can't reduce its height.

As we can see in the modena.css file for the progress-bar CSS selector:

.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    /*-fx-background-radius: 0.583em; *//* 7 */
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}

two CSS properties are responsible for this: -fx-padding for the height of the blue inner bar and -fx-background-insets for the height of the surrounding gray bar.

So you can customize this selector as you need. For instance, with these properties you will have 5 pixels height:

.progress-bar > .bar {
    -fx-background-insets: 1 1 2 1;
    -fx-padding: 0.20em;
}

No need for height settings on your code:

@Override
public void start(Stage primaryStage) {

    ProgressBar pb = new ProgressBar(0.4);
    pb.setPrefWidth(200);
    StackPane root = new StackPane(pb);

    Scene scene = new Scene(root, 300, 200);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

Slim Progress Bar

José Pereda
  • 44,311
  • 7
  • 104
  • 132