So I want to push the dynamic data of each cell of RG with HTML/CSS element, to achieve different gradients for each Group in the Repeating Group:
The HTML file is nested into the Repeating Group cell. But the issue is that it does not change all the backgrounds dynamically - it changes them all to a single color:
Where am I making a mistake? I would very much appreciate someone helping me solve this issue as I’ve been searching over the internet but didn’t find something that could help me…
You shouldn’t need an HTML element to achieve this functionality - you can set the group’s background style to gradient in the bubble inspector, and then enter dynamic colors into the starting color and ending color fields.
The thing is that the basic Bubble gradient editor does not provide with a bit “complex” design features, so I would need to implement it this way (with CSS) to get the results.
Do you have an idea on how could I achieve it this way with HTML/CSS?
Unfortunately, I don’t - custom code is outside of the scope of our support, but hopefully some other users on the forum here have answers for that solution!
Hey @J805 , yes of course - and it’s linked to the group that should be colored gradient. It is expected that each group in repeating group is colored differently, but it colors them all the same (purple like on the example)
So the ID that I’m using as shown in the screenshot is #RoleGradient.
Attached is the screenshot of how it is applied to the group which belongs to the repeating group:
I can tell it is successfully applied because it successfully changes the group’s gradient. But the dynamic part is what is not working (it’s not pulling each cell’s dynamic data and changing each cell to a correct gradient color).
Next, for the ID Attribute. At the end use dynamic data and do current cells index. No spaces, underscores or dashes should be ok.
Do the same thing in the code.
At the moment, all the items inside the repeating group have the same ID. That’s why they are all the same color. By adding current cells index, each will have a unique id attribute instead.
Hey @J805 , although it works, for some reason when a User change the color in the app (picks a color from dropdown he wants), it doesn’t change the color immediately - it changes when the page is refreshed (F5). Do you know what could be a cause for this and how to fix it?
To be honest that’s very strange. When an user changes color it shows like this:
Hmm. Good question. I’m not sure if it has something to do with the custom code or not. You can try refreshing the repeating group instead of the page in a workflow to see if that makes a difference.
Hey @J805 how would you refresh the RG or the group? I was trying to find such a feature in the workflows but didn’t find it - I guess there’s some workaround?
It is expected that each group in repeating group is colored differently, but it colors them all the same (purple like on the example)
