I have 4 colored groups with a ‘+’ and ‘-’ icon. Clicking the minus icon should hide the bottom (red) group. Then, clicking it again should hide the next (blue) group. The ‘plus’ icon should reintroduce the hidden groups back in the same order.
I know I will need to store this in a custom state and perhaps in the DB too because a user’s group settings will need to be saved. The tricky part is how to enable multiple add/remove events to trigger from a single icon. Help appreciated.
If you only ever have 4 groups, then you could just assign each group a number (as its DataSource, or in a custom state), then simply use a condition to show/hide the group based on whether its number is less than or equal to another number which would be set by clicking the plus or minus icons…
If the number of groups is more dynamic, then use a RG with basically the same method (you’ll need to think of some way to define the colours for each group)…
Thanks @adamhholmes - The CSS you gave me has been fantastic, the rows and columns are now working great (ignore bright colours, that’s just to make it easier for me to see whist developing!)
Ok, I see what you mean about assigning each group a number, I will try that thank you.
There will only be 4 rows, however I will have 6 columns (each with 4 rows). What you see below is one column with 4 colours which should have a condition to show/hide.
No, just type the number into the data source directly (i.e. type “4”) - it looks like you’re selecting the Group ‘4’ rather than just typing the number 4…
Obviously, the content type needs to be set to Number…
Tomorrow I will add a second column with numbers for rows 5, 6, 7, 8. Thinking about this, I would like both columns to behave independently, so a user can retain all 4 rows in column 1 (doesn’t hide any), but they may want to hide some of the rows in column 2. I don’t know if this is possible but will find out tomorrow?
Also, do you know how to add notes to the HTML? I tried adding forward slashes like; //notes// but that didn’t work.
Unfortunately I think Bubble has some restrictions because if I use <!-- Write your comments here --> then any HTML directly after this is ignored, see my example here Loom | Free Screen & Video Recording Software | Loom. This isn’t super important so no worries if this is a Bubble issue, I will have to avoid using comments.
@adamhholmes Without wanting to take advantage of your generosity, I wondered if you could check out the video below because I’d like a ‘sanity check’ to make sure I am approaching the problem in the best way. Maybe my approach with the add/remove rows is not the smartest way to do what I need?
Ultimately I need the user to be able to generate something like this, each window height can be adjusted but it always respects the overall frame height.
