Description

In PrimeFaces, the ProgressBar component currently renders its label outside the ui-progressbar-value container, resulting in a misaligned label. This differs from the behavior in PrimeNG and PrimeVue, where the label is positioned correctly within the progress bar and aligned with the progress value.

This inconsistency leads to visual and functional differences across frameworks and impacts developers working on applications that use multiple Prime products.

Describe the solution you would like

To achieve alignment with PrimeNG and PrimeVue, render the ui-progressbar-label element within the ui-progressbar-value container in the DOM. This structural change will ensure the label is displayed consistently across all Prime frameworks, centered within the progress bar and aligned with the progress value.

Additional context

The current behavior of PrimeFaces places the ui-progressbar-label outside the ui-progressbar-value container, as shown in the attached screenshots. The desired behavior can be achieved by rendering the label as a child element of ui-progressbar-value.

Attached are:

Screenshots of the current implementation in PrimeFaces.
A reference screenshot of the desired implementation in PrimeNG/PrimeVue.
The DOM structure showing how the label can be rendered correctly.