Hi all,
I saw this post: https://www.outsystems.com/forums/discussion/57921/text-in-progressbar-doesnt-show-up-reactive-web/
I want to show a text inside the progress bar, but this value is showed bellow the progress bar, and if I change this class:
.progress-bar-text {
display: block;
}
See here the example:
https://personal-gxzlvs5j.outsystemscloud.com/Tests/ProgressBar?_ts=637691337981505982
I want to achieved this result:
Does anyone have this issue? Any solution?
Best Regards,
NunoR
I have did a component that solves my issue:
https://personal-gxzlvs5j.outsystemscloud.com/ProgressBarExtended/
Hope it helps if someone have the same issue.
Nuno R
Hi Nuno,
Can you please send the oml file of this application
You can make the element absolute, pushing it over the progress bar by applying a negative margin top equal to the height of the bar and place the percentage / 2 to center it. Something like on the image below:
To really be centered, you should also consider the size of the font but you can play with the CSS calc function to do so.
Kind Regards,João Marques
Hi @João Marques ,
Thanks for the reply.
I try to apply your approach and it doesnt work, because the progress can be dynamic. Maybe if OS change the component and add the with also to the container with the class ".progress-bar-text " can solve the issue.
I will create a component that solve the issue. I will share it here.
Sorry, it was not clear from my response, but the margin-left, which is dependent on the percentage, should be set as inline CSS.
With that, you can create a wrapper of the bar-progress which adds that CSS based on the input percentage and in this way, you can still take advantage of OutSystems UI upgrades.
Kind Regards,João
Hi João,
I try to apply your ideia, but I cant have the result that I want.
To achieve want I want, I duplicate the component from OS, and do some changes:
https://personal-gxzlvs5j.outsystemscloud.com/Tests/ProgressBar
Now it works for all values.
Do you think it can be nice to put on the forge for others can use?