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.
Comments
Hi,
I have passed it on to the dev team, and was informed that it will be fixed in today's update.
Best regards
hi,
Sounds great.
Thank you so much.
The pity is that when support ends, even if it is not for help, no more bugs can be reported...
FYI, there was a delay on the update, and it will be released today.
Also note that if you encounter a bug you can always report it through the contact form:
http://themeforest.net/user/muffingroup#contact
Best regards
Hi, I'm reopening this thread because I just noticed that in the progress bar function, you've set the default progress bar titles to H6, instead of displaying what was selected in the Builder.
I don't remember if it was like this before. But I wanted to let you know you have this error.
$output .= '<h6>';
Best Regards.
The tag selection applies only to the main heading of the progress bars component. The label for each individual bar has always been rendered using an h6 tag. However, if you consider that this component should also support configurable heading levels for the bar labels, we can implement such an option.
Best regards
Hi, You're absolutely right. It was my mistake.
I think it would be interesting to be able to specify the tag for each bar (or group of bars).
I've implemented this in a function in the child theme and it's sorted (so I wouldn't have any orphaned H6s), but I think it would be great if you integrated it into the Progress Bars > Style > Bar settings (or wherever you see fit).
I think it could be beneficial for the community.
Best regards
Sure thing, we will consider implementing such a feature.
Best regards