Why is my p:progressBar not displayed, only the number?

Question

I have following XHTML file with a progress bar:

Answer 1

The problem is two-fold.

First problem is a bug in primefaces:primefaces-mobile.js which exposes as follows in browser's JS console (noted should be that I removed the <p:graphicImage> to reduce noise):

It appears that the <p:progressBar> script isn't by default included in PrimeFaces mobile CSS/JS and thus needs to be loaded individually. However, the inline PrimeFaces.cw(...) call in the generated HTML output, which is responsible for that, appears to lack the 4th argument which should represent the CSS/JS resource name. See the following extract from the generated HTML output (formatting mine):

<script id="page:progressBar_s" type="text/javascript">
    $(function() {
        PrimeFaces.cw(
            "ProgressBar",
            "widget_page_progressBar",
            { id: "page:progressBar", widgetVar: "widget_page_progressBar", initialValue: 21, ajax: false, labelTemplate: "{value}%" }
        );
    });
</script>

This causes the CSS/JS resource name to end up as undefined:

GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.1
GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.1

This is clearly a bug in PrimeFaces mobile. Your best bet is to report this issue to the PF guys.

In the meanwhile, you can workaround this by executing this script in end of head or begin of body, either inline or via a custom script file:

var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
    resource = resource || name.toLowerCase();
    originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};

This basically defaults to lowercased version of widget name when no CSS/JS resource name is defined. Now the progress count appears as bold and there's a space in front of that count:

This brings us to the second problem. The .ui-progressbar .ui-widget-beader CSS is missing the background color in the CSS. On standard (non-mobile) PrimeFaces, this is defined in theme-specific CSS file such as primefaces-aritso:theme.css. For mobile PrimeFaces, this style is thus expected in primefaces:primefaces-mobile.css, however it contains only the <p:panel> style.

I'm here not sure if this is a bug or an oversight in PrimeFaces mobile. Also here, your best bet is to report this issue to the PF guys.

In the meanwhile, you can get it to style by adding the following CSS in end of head, either inline or via a custom CSS file:

.ui-progressbar .ui-widget-header {
    background-color: pink;
}

You might only want to add a tiny border as finishing touch.