Hey guys,
Ive been using the progress bar but I think the bar is not able to handle percentages if they involve thirds (1/3 or 2/3).
The percentage input accepts values from 1-100, including fractions like 1.4 (which would be 1.4%).
The input box doesn’t calculate values, so if you pass 1/4 it will take it as a literal - you’d have to transform that into 0.25 or 25 (depending on what you intend to do) first, and then pass it the value.
If neither of these answers your question, share your app name at support@bubble.is and we’ll take a look.
1 Like
I understand. The progress bar percentage is based on a calculation that I have put into the element editor:
Is the input in the editor able to run a calculation to arrive at a percentage? Would I need to format the result?
Your solution should work - I created a similar one (the other count is 47)
Use the inspector to troubleshoot. Make sure to pick the ‘/’ and * operators in the dropdown and not type them by hand.
Maybe Ill try making the progress bar larger. It doesnt seem to work for the caclulation if it divides by three fore some reason. My app is https://hvac_designer.bubbleapps.io/job_board
Can you use the debugger and see what value is sent to the progress bar?
Use the inspect button and then click on the progress bar and then again on the value. See my previous screenshot and below.
Ive been toying with the size of the progress bar as well as whether you round the number that is calculates as the percentage. Turns out that if I rounded the number, it would peform better. There seems to be a connection to the text size of the percentage to the display of the progress bar on the smaller sizes. The small ones on the left side have a width of 53 pixels.
The smaller the progress bar, the less accurate it is and you will need to round the numbers too. Is there a way to fix this?
Im thinking they put in a minimum amount of background color so that it would always be behind the text to show contrast.
1 Like
You are right about the background color - we use it to ensure the text always has the right color behind it.
So I’ve come up with a fix for the progress bar to get it to show the right percentages when it is a small size.
To get it to work you need to:
- round the percentage calculation in order to shorten the text of the percentage if it is a third or other long result.
- create a progress bar text style. Change the font to be fully transparent and font size to 1.
- Create a condition on the progress bar that if percentage = 0 (however you calc percentage) that the progress bar color = background color
- If you want, create a text overlay in a color that is not the bar or background color to show the percentage value.
8 Likes
If it may help others : I struggled with incoherent results of the progress bar, and realized that it does not handle properly any number that has numbers after the decimal point.
Adding :ceiling or :floor to the end computed % number fixes this.
1 Like