ProgressBar element issues: space & DOM render
Hi,
We are experiencing two issues with the ProgressBar element:
1. Missing space between the title and the percentage when it is visible
When the percentage is set to visible, the value (e.g., “40%”) is inserted inside the same heading tag (H1, H2, H3, etc.) as the title.
The problem is that it appears without any space between the title text and the percentage.
Current DOM output:
<h4>CAR<span class="Label">40%</span></h4>
The result is “CAR40%”, all together.
The expected behavior is to include a space before the <span class="Label">.
Expected output:
<h4>CAR <span class="Label">40%</span></h4>
2. When the percentage is set to hidden, it still appears in the DOM
If the percentage is configured as hidden, it does not appear visually, but it still gets rendered inside the heading, so it remains present in the HTML even though it is hidden.
This causes issues with HTML semantics and accessibility, because screen readers still read “CAR 40%” even when the percentage is supposed to be hidden.
Expected behavior:
- If the user sets the percentage to be hidden, the <span class="Label"> should not be rendered in the DOM at all.
Summary
- Issue 1: Visible percentage appears attached to the title (missing space before the span).
- Issue 2: Hidden percentage continues to be rendered in the DOM.
We have tested this behavior in several installations of the builder, using the current version (28.1.11), and it happens consistently.
Thanks for taking a look.
While waiting for a response from one of our team members, we recommend to check Support Center where it is highly likely that you will find the answer to your question in no time.
FAQ | Video Tutorials | How to