Progress Bar Text Value
Application Type
Reactive

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



Hi all,

I have did a component that solves my issue:

https://personal-gxzlvs5j.outsystemscloud.com/ProgressBarExtended/

Hope it helps if someone have the same issue.

Best Regards,

Nuno R

mvp_badge
MVP

Hi Nuno,


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.

https://personal-gxzlvs5j.outsystemscloud.com/Tests/ProgressBar?_ts=637691337981505982

I will create a component that solve the issue. I will share it here.

Best Regards,

Nuno R 

mvp_badge
MVP

Hi Nuno,


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?

Best Regards,

Nuno R

Hi all,

I have did a component that solves my issue:

https://personal-gxzlvs5j.outsystemscloud.com/ProgressBarExtended/

Hope it helps if someone have the same issue.

Best Regards,

Nuno R

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.