I’m trying to give users a cost overview with a bar showing the percentage of each part of the total cost. The value’s of said costs can be changed through a popup with custom states communicating the numeric values to the text elements shown on the page.
How can I then change the width of this corresponding element in the 100% bar to for example “mortgage expenses” / “total expenses” * 100?
Thanks!
You can use some custom CSS to set the max-width of the element, which you can define anyway you like.
I’ve tried, I’ve added the following CSS to the page header but the element maximizes its width to the parent element width.
#overigbar {
max-width: calc(parseInt(#ovalue {value:}) / parseInt(#apps14 {value:}) * 100%);
}
“Overigbar” is the element in the total cost overview bar.
“ovalue” is an input element containing, for example, “€236,-” as its initial content.
“apps14” is an input element containing, for example, “€730,-” as its initial content.
I used input elements so that I can add the numeric values into the total.
I’m not sure that syntax is correct… but in any case I wouldn’t bother using a calc() function… just use a Bubble expression.
i.e.
#overigbar {
max-width: ((ovalue's value / apps14's value) * 100)% !important;
}
Here’s an example:
Still new to using CSS, the brackets used look like dynamic data inserted in Bubble but I cannot replicate that. How have you set up the calculation shown in the text element?
I always use the experimental parenthesis feature in all my apps (it makes things much easier)…
But in this case it’s not relevant, as the expression will work just the same read from left to right (which is how Bubble reads expressions if you’re not using parenthesis).
So if you don’t have the parenthesis feature turned on in your app just write the expression from left to right:
e.g.
max-width: ovalue's value / app14's value x 100 %
I’ve set up a page like you did but cannot get it to work, can you take a quick look? Moveroof Website | Bubble Editor
If I can get it to work here, I can duplicate it to the main page (I assume)
You can edit the page.
Ok, I’ve fixed it for you so it’s working now…
So you should be able to copy what’s there to your other page.
But just so you know, there were a few issues with your CSS syntax, and you’d entered the expression incorrectly.
Also, as your app is using European formatting for numbers (i.e. using , as the decimal separator, instead of .), the CSS wasn’t recognising the number correctly, so I had to add formatting to the value to use a . as the decimal separator.
But, it’s working as it should now.
Thanks! I started learning CSS recently so thanks for the help, appreciate it.
This topic was automatically closed after 70 days. New replies are no longer allowed.