p-progressbar does not show values in certain themes

[dzmcclure-qcells]

Describe the bug

In some of the prime themes, p-progressbar is very thin and does not show the value. Possibly same issue as #11146, this is not resolved in 17

Environment

I am using Angular 17 with PrimeNG 17.2.0, but the issue is also present on the documentation page of PrimeNG at 17.11.0. The theme in question is Ultima, but this occurs with Fluent and Material as well. Probably others.

Reproducer

No response

Angular version

17.0.7

PrimeNG version

17.2.0, 17.11.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.1

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://primeng.org/progressbar
2. Change the theme to Material or Fluent
3. Progress bars become thin lines with no values

Expected behavior

Progress bars should be wide enough to display a text value

[psarno]

This is being caused by two separate rules in the theme CSS (possibly intentional).

The first is that it is being set to height: 2px. If that is intended for these themes, it's obviously too small to show a value on. That is defined on the .p-progressbar class.

Which leads us to the label not showing. That is due to the display setting on .p-progressbar-label. It is set to none !important, which prevents it from being rendered.

You can override these properties if you want and just set the height to height: 1.5rem on p-progressbar and display: block on .p-progressbar-label, and it should look correct.

[dzmcclure-qcells]

I see, I did not realize it was intentional regarding the theme. Thanks for the solution.