Progress Bar value doesn't appear

Progress Bar value doesn't appear

  

Hy everyone!


I have a problem: I´m using progress bar and it work fine, but I don't know why the percentage value just appear in show Tooltip and I want that the value appears inside the bar.

What can I do to solve this question?


Thanks everyone!


Best regards,

Ricardo Pereira

Hello Ricardo,

Which Progress Bar? Web or Mobile? :)

Cheers,
Eduardo Jauch

Hello Eduardo!


Web! 


Thanks!

Solution

Hi Ricardo,

I have a small example of a progress bar here.

To sow the number inside the progress  bar, set the property ShowToolTip to False.

Hope this helps,

Cheers,
Eduardo Jauch

Solution

Thanks, but the problem is that now the value doesn't appear in every bar and/or value! Can I change something to put this working correctly?


Thank you for your help!


Cheers,

Ricardo Pereira

Hello Ricardo,

That is the version of the platform you are working on?
If it is 10, your application needs a SILK UI theme to the progress bar to work, as the Web Application template does not have the CSS and JavaScript to deal with SilUI components (Web Patterns).

Are you applying any CSS style to the progress bar? Or do you think you can have any CSS selector that could be being applied to it?

Because this seems to be a problem with colors.

I'm sending the OML of my test application to you to see that how it works by default (It's OutSystems 10 and uses the Dublin template).

You can inspect your progress bar to see if the value is there, like this, where you can see the value 45% in the span element of the progress bar.:

Cheers,
Eduardo Jauch

Thank you for your help! I solve the problem including this line in CSS code: 

SyntaxEditor Code Snippet

.Progress_bar {
   
    text-align: left;
   padding-left: 4%;
}

The problem was that the value was out of borders!


I use platform 10 and I use SilkUI!


Thank you very much for your help!


Cheers,

Ricardo Pereira

Hi Ricardo,

So, we were right. You probably have some CSS that is changing the Progress Bar CSS.
Glad you solved the problem and we were able to help.

Cheers,
Eduardo Jauch