Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX 2.2 - Hiding percentage of a progressIndicator within a ListCell

Tags:

css

javafx-2

I have a ListCell in which I display progress information of a file download by ProgressIndicator.

My problem is with removing the percentage information displayed below the indicator. As stated here, I included a rule in my css as following:

.customProgressIndicator .percentage{
    visibility: hidden;
    -fx-text-background-color: red;
}

The -fx-text-background-color: red part is just to be sure that our css is applied to the node.

The problem is, I make a call like indicator.setProgress(progress), the percentage becomes visible (in red), and when I hover the cursor over the indicator, it becomes invisible again. Again at the end, "Done" text becomes visible at the bottom upon the call indicator.setProgress(1.0), and again becomes invisible after a hover.

It might be related with ListView because; after hovering and causing it to become invisible, if I remove an item from the List and cause an updateItem on ListCell, it becomes again visible.

I have tried a workaround as:

    Text text = (Text)indicator.lookup(".percentage");
    if ( text != null )
    {
        text.setText("");
    }

But text is sometimes null, sometimes not.

like image 891
Ramazan Avatar asked Feb 05 '13 14:02

Ramazan


1 Answers

Notes:

1) I read the post you linked and the OP implicitly confirms the visibility: hidden; is worked for him/her. But I have tested the same code and it is not working. Maybe due to version differences. I don't know.

2) -fx-text-background-color is not a CSS property. It is a predefined color in a caspian.css. So changing it you are implicitly changing the color of percentage label, defined as default in

.progress-indicator .percentage {
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
    -fx-fill: -fx-text-background-color;
}

of caspian.css. (Note the -fx-text-background-color above)

3) Finally, the effect you want can be done through

.customProgressIndicator .percentage {
    -fx-fill: null;
}

P.S. I have not tested a progress indicator inside a listview.

like image 187
Uluk Biy Avatar answered Nov 15 '22 07:11

Uluk Biy